DOM常用操作方法

DOM的增删改查

DOM的节点类型

1. element元素节点

2. attribute:属性节点

3. text文本节点

4. comment:注释节点

5. document:文档节点 代表整体页面
   …

节点类型官方文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

1. 创建（增）

     1.createElement() 创建标签
     2.createTextNode() 创建文本
     3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的
      为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性           的再添加到页面的dom中 
  
    //先创建li，然后插入到ul中
       var oul=document.querySelector('.list')
    //先创建一个文档碎片
        var fragment=document.createDocumentFragment();
			   for(var i=0;i<100;i++) {
			        var newLi=document.createElement('li');
			        newLi.textContent=`项目${i+1}` 
			        fragment.appendChild(newLi)  //已经将100个li添加到fragment上了
			
			   }
   oul.appendChild(fragment);

4.cloneNode(true)  克隆  //添加true代表深度克隆，包括子节点的所有内容也可以克隆过来

2. 修改

父节点.appendChild(子节点)  尾追加
父节点.insertBefore(新节点,参考节点) 前追加
父级节点.removeChild(要删除的子级节点) 移除节点
replaceChild(新节点，旧节点)  替换节点

3. 查询

getElementById()  获取id ，如果页面上有多个相同id，只返回第一个
getElementsByTagName() 获取标签名 返回是类数组
getElementsByName()  获取表单中name名称  返回类数组
getElementsByClassName  只能获取class名称  返回类数组
querySelector  只获取匹配的第一个css选择器  //特别适合移动端
querySelectorAll  获取匹配的css选择器类数组 //特别适合移动端

4. 节点关系

parentNode:找父节点
parentElement：找父元素

previousSibling：找前一个兄弟节点
previousElementSibling：找前一个兄弟元素
nextSibling：找后一个兄弟节点
nextElementSibling：找后一个元素节点

childNodes:属性，即包括元素节点，也包括文本节点
children:属性 只获取直接子级元素，不获取文本节点（元素类型===1）
firstNode：找第一个节点
lastNode：找最后一个节点
hasChildNodes：用于判断是否有子元素

5. 属性型

setAttribute
getAttribute

6. 样式型

window.getComputedStyle：获取css样式

getBoundingClientRect  获取dom的位置信息

js官方查询文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

js官方查询文档 传送门