完整的DOM总结增,删,改,查

增：

元素：3步 1、var elem=document.createElement("标签名"); 2、elem.属性名="属性值" elem.on事件名=function(){} 3、父.appendChild(elem); 父.insertBefore(elem,已有子元素); 父.replaceChild(elem,已有子元素);

2、内容：elem.innerHTML/innerText/value+="新内容"

3、属性：elem.setAttribute("class","d1 d2");

4、样式：elem.style.css属性名="css属性值";//没有叫添加，有了叫替换

删：

1、元素：elem.remove();

2、内容：elem.innerHTML/innerText/value=""

3、属性：elem.removeAttribute("属性名");

4、样式：elem.style.css属性名="";//没有叫添加，有了叫替换

改：

1、元素：父.replaceChild(elem,已有子元素);

2、内容：elem.innerHTML/innerText/value="新值"

3、属性：elem.setAttribute("class","d2");

4、样式：elem.style.css属性名="css属性值";//没有叫添加，有了叫替换

查：

1、元素：

- 1、直接找：

按照HTML特点查找

  document.getElementsByTagName("标签名")
  document.getElementName("name值")
  document.getElementsByClassName("class名")

按照CSS选择器进行查找

  document.querySelectorAll
  document.querySelector

面试题

getXXX和querySelectXXX的区别:

返回的结果不同

getXXX:返回的是一个动态集合
     ---------每次修改DOM树,都会悄悄的再次查找;
     
querySelectXXX:返回的是一个静态集合
     ---------每次修改DOM树不会再次查找,至关第一次找出的结果

集合类型

动态集合:支持forEach

静态集合:不支持forEach

复杂查找时

尽量使用varelem = document.querySelectAll("任意的CSS选择器")

- 2、通过节点关系查找

前提 : 至少要先找到一个元素

```
 父元素:xx.parentNode
```
```
 子元素:xx.children
```
```
 第一个儿子:firstElementChild
```
```
 最后一个儿子:lastElementChild
```

 前一个兄弟:previouseElementSibling

```
 最后一个兄弟:nextElementSibling
```

- 3遍历层级不明确的树状结构：

区别:

  递归（不仅可以遍历元素、还可以遍历数据）

函数中再一次调用函数自己,但是迟早会执行完之后会停下来

作用:专门用于遍历层级不明确的树状结构

算法:使用深度优先遍历

实现:2步

   1.创建函数:传入实参树根,形参接住,直接要做第一层要做的操作
   function f1(root){
       //直接要做的第一层的操作
       //判断自己是否有下一级,如果还有下一级,接着又调用此方法,但是传入的实参已经变成你的下一级
   }
   
   2.调用函数f1()
   fi(实参);

2. 遍历API

作用:专门用于遍历层级不明确的树状结构

算法:使用深度优先遍历

实现:2步

    1创建treeWalker对象
    var tw=document.createTreeWalker(ul,NodeFilter.SHOW_ELEMENT[所有元素节点]/SHOW_ALL[所有的节点])
    2.反复调用nextNode方法
    while()(node=tw,textNode())!=null){
         node;//当前节点做什么操作
    }

注意:此方法必须跳过起点

  纯循环 遍历层级不明确的树状结构的时候-----别用

总结

遍历API(在遍历页面元素的时候)
纯循环难度较大,尽量别使用,可以锻炼一下逻辑
遇到层级不明确的树状结构的时候优先使用递归(不仅可以遍历元素,还可以遍历数据)

2、内容：

一切的获取往往都是用于判断

一切的设置,说白了就是在做修改操作

区别:

elem.innerHTML:可以识别标签,再使用判断的时候要注意
textContent:不能识别标签,而且具有兼容性问题(老版)
elem.innerText:没有兼容性问题,不识别标签
elem.value:用于操作input和select标签

3、属性：

核心DOM

获取: elem.getAttribute("属性名"); 
设置: elem.setAttribute("属性名","属性值");

简化版

获取:elem.属性名;
设置:elem.属性名="属性值"

简化版注意:

class类必须写为className
只能操作标准属性,不能操作自定义属性

4、样式：

//只能获取内联样式

  elem.style.css属性名;
  elem.style.css属性名="属性值"

注意:

优先级除了(!important)最高,保证js用户触发式一定生效
不会牵一发而动全身,只会操作当前元素缺点 : 获取样式时必须保证此样式在内联样式之中

特殊:CSS属性名写法,如果有"-"(横线)要去掉横线,变为小驼峰命名法

新增方法

1、属性：

删除：

1.核心DOM:elem.removeAttribute("属性名")-----删干净整个节点

2.HTML DOM:elem.属性名="";-----赋值为空,删不干净,属性值确实没有了,但是属性名还在,有的属性值有属性名也是具有效果的比如:(href,disable,selected)
判断有没有：elem.hasAttribute("属性名"); -- 只能判断有没有不能判断具体值是什么

推荐：

 if(elem.getAttribute("属性名")=="值"){
 
 }

2、样式：

样式表：
  获取：document.styleSheets[i].cssRules[i].style.css属性名
  设置：document.styleSheets[i].cssRules[i].style.css属性名="css属性值"

3、渲染页面：3种：

父元素.appendChild(新元素);//新元素会插入到父元素的末尾-----重点
父元素.insertBefore(新元素,已有子元素)//新元素会插入到父元素里面已有子元素之前---不推荐,会影响修改其他人的下标 3.父元素.replaceChild(新元素,已有子元素)//新元素会替换掉父元素里面的已有的子元素

删除元素：elem.remove();

4、HTML DOM常用对象：个别可以简化

- 1、image：

  var img=new Image();

- 2、form：简化了查找

 查找form元素: var form=document.forms[i]

 查找表单控件:var input=form.elements[i]

 专属事件:onsubmit事件---->提交一瞬间会执行,也可以阻止提交return false

- 3、select：

  1、options===(等效于)children//获取到select下面所有的option
  2、selectedIndex === 获取当前选中项的下标-------只要做联动必不可少
  3、add()
      select.add.(option)---完全等效于appendChild,追加元素
  4、remove(i) === 删除下标为i的option
  5、onchange:专属事件----选中项发生改变时触发

- 4、option：

  select.add(new Option("innerHTML","value"))

完整的DOM总结增,删,改,查方法及语法