DOM操作

1： dom对象的innerText和innerHTML有什么区别？

innerHTML支持HTML；innertext只支持纯文本。
写：

  div1.innerHTML='hello world'   //输出 hello world(斜体)

  div1.innerText='hello world'   //输出hello world

读：

  

      

          123
          456
     
 
 var ct = document.getElementsByTagName('div')

 console.log(ct.innerHTML) 
 //
123456

innerHTML 会输出HTML标签

 console.log(ct.innerText)   
 //123456  

innerText 会忽略HTML标签

2： elem.children和elem.childNodes的区别？

• elem.children返回元素中的元素子节点，是HTMLCollection的实例；
• elem.childNodes返回元素中的所有子节点（包括空白文本节点），childNodes中保存着一个NodeList类数组对象（有length属性但并不是Array的实例），可通过方括号语法来访问NodeList的值。

大多数情况下使用children属性，在元素只包含元素子节点时，这两个属性的值相同。

    
    
Hello
    
abcabc

3：查询元素有几种常见的方法？ES5的元素选择方法是什么?

getElementById() //(查符合的ID)

返回匹配指定id属性的元素节点。

  var elem = document.getElementById('id名字')

getElementsByClassName() //(查所有符合的class)

返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。

  var elements = document.getElementsByClassName(names)

注：names参数可以是多个空格分隔的class名字，返回同时具有这些节点的元素

  document.getElementsByClassName('warp text')

getElementsByTagName() //(查所有符合的标签)

返回所有指定标签的元素(包括本身)，返回值是一个HTMLCollection对象，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。

  var paras = document.getElementsByTagName("p")
  // 返回当前文档的所有p元素节点

如果参数是大写，会将参数转为小写后，再进行搜索。

getElementsByName() //(查找拥有name属性的元素)

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

  // 假定有一个表单是
  

  var forms = document.getElementsByName("x");
  forms[0].tagName // "FORM"

注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。

ES5的元素

querySelector() //(查找第一个符合要求的元素)

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

  var el1 = document.querySelector(".myclass");
  var el2 = document.querySelector('#myParent > [ng-click]');

querySelector方法无法选中CSS伪元素。

querySelectorAll() //(查找所有符合要求的元素)

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

4：如何创建一个元素？如何给元素设置属性？如何删除属性

  

    
hello world
  world
  

5：如何给页面元素添加子元素？如何删除页面元素下的子元素?

  

    
hello
  
  

6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

element.classList所有方法介绍如下：

• add ： 为DOM对象加class。
• remove ：从DOM对象删class 。
• contains ：检测DOM对象是否已经应用了某class。
• toggle ：若DOM对象已经应用了某class则删除，若未应用则添加。
• item ：获取指定下表的class名字。

判断、添加和删除class：

    
hello world
    

7： 如何选中如下代码所有的li元素？ 如何选中btn元素？

  

     

         
list1
         
list2
         
list3
     
     点我