dom操作--操作属性,方法

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口( HTML 元素被定义为对象，而编程接口则是对象方法和对象属性)
W3C 标准

属性

• url: html文档位置
• title: 文档标题
• images: html中图片
• form表单: html表单
• body标签: html中的标签

//文档标题,可以修改标题
document.write="hello"; 
//获取所有表单
console.log(document.forms);
//获取所有图片
console.log(document.images);
//获取body
console.log(document.body);

方法

1.获取方法

• 1.通过id获取(只获取一个元素)

  document.getElementById("id名")

• 2.通过标签名获取(结果是数组)

  document.getElementsByTagName("标签")

• 3.通过类名获取(结果是数组)–ie9及以上识别

  document.getElementsByClassName("类名")

• 4.通过name属性获取(结果是数组)–常用于表单

  document.getElementsByName()

• 5.通过css选择器获取(只获取一个元素)–ie8及以上识别

  document.querySelect("css选择器")

• 6.通过css选择器获取(结果是一个数组)–ie8及以上识别

  document.querySelectAll("css选择器")

修改元素内容

• 1. innerHTML–1识别标签,2可以访问,可以修改

     元素.innerHTML='修改后的结果'

• 2. innerText–输出纯文本

     元素.innerText='修改后的结果'

• 3. textContent–输出纯文本,保留文本格式

     元素.textContent='修改后的结果'

修改样式

1.通过修改类名—ie9以下不能用

• 1.通过className获取

  元素.className='类名 //会覆盖原有的类名
  元素.className+='类名' //类不会覆盖,只会叠加

• 2.通过classList属性

  元素.classList.add('类名')//添加类名,不覆盖原有类名
  元素.classList.remove('类名')//移除类名
  元素.classList.contain('类名')//判断类名是否存在,有true,没有false
  元素.classList.toggle('类名')//添加或删除类名,有删除,没有添加

2.通过行内style样式

元素.style.样式名=’样式值’

3.通过操作属性

• 1.原生属性–本身具有

  元素.属性名='属性值'

• 2.自定义属性–自己定义的(原生的属性也可以使用)

  元素.setAttribute('属性名','属性值')//设置属性
  元素.getAttribute('属性名')//设置属性
  元素.removeAttribute('属性名')//移除属性
  元素.hasAttribute('属性名')//判断属性是否存在(boolean类型,用于条件判断)