【webAPI】DOM操作全集

获取元素

1. 通过id名获取元素：document.getElementById(‘id’)；
2. 通过类名获取元素：document.getElementsByClassName(‘类名’);，返回一个伪数组。
3. 通过标签名获取元素：document.getElementsByTagName(‘标签名’)；返回一个伪数组。
4. document.querySelector(’.类名’)； document.querySelector(’#id名’)； document.querySelector(‘标签名’)；
   根据元素选择器，返回第一个元素对象。
5. document.querySelectorAll(’.类名’)； document.querySelectorAll(’#id名’)； document.querySelectorAll(‘标签名’)；
   根据元素选择器，返回元素对象数组。
6. 获取body元素：document.body；
7. 获取html元素：document.documentElement；

操作元素

元素内容（修改和获取）

1. innerHTML
   修改内容时：会识别html代码。
   获取内容时：innerHTML会保留空格和换行，innerHTML会显示出来html标签。
2. innerText
   修改内容时：不会识别html代码。
   获取内容时：innerText会去除空格和换行，innerText会把HTML标签去除再显示。

元素属性（获取和修改）

1. 行内样式
   • 获取行内样式：元素对象.style.样式属性。
   • 修改行内样式：元素对象.style.样式属性=值，比如：div.style.backgroundColor='red',样式属性用驼峰命名。
2. 修改class：class是保留字，所以用className来操作类名属性。元素对象.className=新类名，比如div.className='item'。
3. 自定义属性
   通过元素对象.属性的方式只能获取或者修改元素内置属性的值，不能修改或获取程序员自定义属性的值。
   • 获取自定义属性：元素对象.getAttribute('属性名')
   • 设置自定义属性：元素对象.setAttribute('属性名','属性值')
     比如：div.setAttribute('class','1')，注意，这里是class不是className
   • 移除属性：元素对象.removeAttribute('属性名')
     比如：div.removeAttribute('class')
   • H5中规定一data-开头作为自定义属性名赋值，比如
     <div data-index="1"></div>
     或者通过js:
     兼容性写法：element.setAttribute('data-index','1')
     ie 11后支持的写法：element.dataset.index='1'
4. 修改表单元素属性
   表单元素对象.disable=true
表单元素对象.checked=true等等。

操作节点

下文中“node”，代表dom对象。

获取节点

1. node.parentNode
   返回某节点的父节点，最近的一个父节点，如果没有父节点返回null。
2. node.childNodes （标准）
   返回指定节点的所有子节点，是一个集合，包含文本节点、元素节点等，如果要获得里面的元素节点，需要专门提取，所以不提倡使用。
3. node.children （非标准）
   返回所有的子元素节点，其余节点不返回。得到了所有浏览器的支持，可以放心使用。
4. node.firstChild
   得到第一个子节点，找不到返回null。同样，也是包含所有类型的节点（文本节点、元素节点等）。
5. node.lastChild
   得到最后一个子节点，找不到返回null。同样，也是包含所有类型的节点（文本节点、元素节点等）。
6. node.firstElementChild （有兼容性问题 IE9以上才支持）
   得到第一个子元素节点，找不到返回null。
7. node.lastElementChild （有兼容性问题 IE9以上才支持）
   得到最后一个子元素节点，找不到返回null。
8. 得到第一个子元素节点，无兼容性问题：node.children[0]
9. 得到最后一个子元素节点，无兼容性问题：node.children[node.children.length-1]
10. node.nextSibling （有兼容性问题 IE9以上才支持）
    得到下一个兄弟节点，找不到返回null，包含元素节点、文本节点等等。
11. node.previousSibling （有兼容性问题 IE9以上才支持）
    得到上一个兄弟节点，找不到返回null，包含元素节点、文本节点等。

创建、添加节点

1. document.creatElement(‘标签名’)
   返回创建的dom对象。
2. node.appendChild(child)
   此方法将节点child添加到指定父节点node的子节点列表末尾。
3. node.insertBefore(child,指定元素)
   此方法将节点child添加到指定父节点node的一个指定的子节点前面。

删除节点

node.removeChild(child)
从node节点中删除一个子节点，返回删除的节点。

复制（克隆）节点

node.cloneNode(true/false)

1. 如果括号参数为空或者为false，则是浅拷贝，，即只克隆复制节点本身，不克隆里面的子节点。
2. 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点