JavaScript DOM权威指南

15.1 DOM概览

15.2 选取文档元素

• getElementById()

function getElementId(){
    var elements = {};
    for(var i=0;i

• getElementsByName()
• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()/querySelector()

15.3 文档结构和遍历

• 作为节点树的文档
  • parentNode
  • childNodes：只读的类数组对象

两种方法可以将类数组对象转化为数组 :

• 1. ES6中 Array .from()[需要编译]
• 2. Array.prototype.slice.call(someNode.childNodes,0);
  • firstChild / lastChild ：没有返回null
  • nextSibling / prevSibling：这两个属性将节点之间以双向链表的形式连接起来
  • nodeType
  • nodeValue : Text节点或者Comment节点的文本内容
  • nodeName：元素的标签名，以大写形式表示
• 作为元素树的文档
  • firstElementChild / lastElementChild
  • nextElementSibling / prevElementSibling
  • childElementCount：返回子元素的数量 == children.length

15.4 属性

• html属性：document.getElementById('myimg').src;
• 设置获取非标准html属性
  • getAttribute()
  • setAttribute()
  • hasAttribute()
  • removeAttribute()
• 数据值属性
  • HTML5中设置了"data-x" == dataset.x 例如：data-jquery-test == dataset.jqueryTest(驼峰表示法)
• Attr节点的属性：attributes属性，用法与childNode属性类似.

15.5 元素的内容

• 作为html元素的内容：
  • innerHTML浏览器擅长解析HTML，但是“+= 效率低下，因为既要序列化又要解析”
  • outerHTML:包含当前标签名的输出
• 作为纯文本的元素内容
  • textContent：将指定元素中的多有后代Text节点简单的串联在一起
  • innerText：不反悔