DOM 文档对象模型

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

• innerText:得到dom对象(元素)内部的文本内容,如果dom对象内部嵌套多层元素,则会按照由浅到深的顺序,将各元素内的文本连接起来
• innerHTML:得到dom对象(元素)内部的HTML结构

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

  


  

    
aaaaaa
    aaaaaa
    baidu
    
bbbbbb
  

• elem.children:返回子HTML元素列表(不包含elem内部的文本节点),是HTMLCollection类型的对象

  
  
  

• elem.childNodes:返回子元素列表(包含elem内部的文本节点),是NodeList类型的对象

  
  
  
  • 其中第2个文本节点的内容为: 换行 aaaaaa 换行
• HTMLCollection和NodeList:
  • 相似:
    • 都是类数组对象，都有length属性，可以通过for循环迭代
    • 都是只读的
    • 都是实时的,即文档的更改会立即反映到相关对象上面(有一个例外，document.querySelectorAll返回的NodeList不是实时的)
    • 都有item()方法，可以通过item(index)获取元素
  • 区别:
    • HTMLCollection对象具有namedItem()方法(根据 Id 返回指定节点，或者作为备用，根据字符串所表示的 name 属性来匹配。根据 name 匹配只能作为最后的依赖，并且只有当被引用的元素支持 name 属性时才能被匹配。)
    • HTMLCollection通过属性获取元素可以支持id和name，而NodeList对象只支持id

var elem1, elem2;

// 假定在文档中有一个 
 元素，且它的 id 是 "myForm"：document.forms 是一个 HTMLCollection

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // 显示 "true"

elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // 显示 "true"

而NodeList只支持id

var divs = document.getElementsByTagName( 'div' );
var firstDiv = divs[ 0 ];

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

• 查询元素有几种常见的方法
  • getElementsById():返回匹配指定ID属性的元素节点
  • getElementsByClassName():返回一个类似数组的对象（NodeList类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身）
  • getElementsByTagName():返回所有指定标签的元素（搜索范围包括本身）,返回值是一个NodeList对象
  • getElementsByName():用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象
• ES5的元素选择方
  • querySelector():返回匹配指定的CSS选择器的元素节点,如果有多个节点满足匹配条件，则返回第一个匹配的节点
  • querySelectorAll():返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象

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

• 创建一个元素:

  • 使用createELement方法创建HTML元素节点

  var newDiv = document.createELement("div");
  

  • 使用createTestNode方法创建文本节点

  var newContent = document.createTextNode("Hello");
  

  • 使用createDocumentFragment方法生成一个DocumentFragment对象。

  var docFragment = document.createDocumentFragment();
  

• 给元素设置属性

  • setAttribute()方法用于设置元素属性

  //为id = div1的元素设置class=container的属性
  var node = document.getElementsById("div1");
  node.setAttribute("class","container");
  

• 删除属性

  • romoveAttribute()方法用于删除元素属性

  var node = document.getElementsById("div1");
  

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

• 添加子元素

  • appendChild()用于在元素末尾添加元素

  var bodylist = document.getElementsByTagName("body");
  var body = bodylist[0];
  var newNode = document.createElement("h2");
  var newContent = document.createTextNode("zzzzzzzzzzzzzzz");
  newNode.appendChild(newContent);
  body.appendChild(newNode);
  

  • insertBefore()在某个元素之前插入元素

  body.insertBefore(newNode, body.firstChild);
  

• 删除子元素

  • removeChild()用于删除元素

  parentNode.removeChild(childNode);
  

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

• element.classList有以下几种方法

  
  
  

• 使用element.classList.contains()判断一个元素的 class 列表中是包含某个 class

• 使用element.classList.add()添加一个class

• 使用element.classList.remove()删除一个class

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

   

       
list1

       
list2

       
list3

   
   点我

• 选中li元素:
  • querySelectorAll(".mod-tabs li")
  • querySelectorAll("li")
  • document.getElementsByTagName("li")
• 选中btn元素:
  • querySelector(".btn")
  • document.getElementsByTagName("button")[0]
  • document.getElementsByClassName("button")[0]