第10章 DOM

dobeco

# 第10章 DOM

# 10.1 节点层次

JavaScript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个nodeType属性，用于表明节点的类型。一共有12个节点类型，分别是：

element
attribute
text
cdata_section
entity_reference
entity

节点类型	常量	类型值
element	Node.ELEMENT_NODE	1
attribute	Node.ATRIBUTE_NODE	2
text	Node.TEXT_NODE	3
cdataSection	Node.CDATA_SCETION_NODE	4
entityReference	Node.ENTITY_REFERENCE_NODE	5
entity	Node.ENTITY_NODE	6
processingInstruction	Node.PROCESSIONG_INSTRUCTION_NODE	7
comment	Node.COMMENT_NODE	8
document	Node.DOCUMENT_NODE	9
documentType	Node.DOCUMENT_TYPE_NODE	10
documentFragment	Node.DOCUMENT_FRAGMENT_NODE	11
notation	Node.NOTATION_NODE	12

Node.ELEMENT_NODE // 1
Node.TEXT_NODE // 3
Node.DOCUMENT_NODE // 9


<body>
  <div id="home">
    哈哈哈
  </div>
</body>

<script>
 let home = document.getElementById('home');
 console.log(home.nodeType) // 1
  if(home.nodeType == 1) {
   alert('Node is an element.')
 }
</script>

将一个element节点的NodeList转换为数组

function converToArray(nodes) {
  var array = null;
  try{
    array = Array.prototype.slice.call(nodes.childNodes, 0) 
  } catch (err) {
    array = [];
    for(var i = 0; i<nodes.length; i++) {
      array.push(nodes[i])
    }

  }
  return array;
}

let nodeList = converToArray(home);
console.log(nodeList)

# 操作节点方法

appendChild() 向列表末尾添加一个节点
insertBefore(插入节点,参照节点) 任意位置插入节点
removeChild(移除节点) 移除一个节点
replaceChild(插入节点,替换节点) 替换一个节点
cloneNode(布尔值) 创建副本节点 true深复制，false浅复制。该方法不会赋值添加到DOM节点中的js属性，例如事件处理程序等。
normalize() 处理文档树中的文本节点

# Document类型

document.documentElement 获取整个文档的元素节点
document.body 指向文档中的body元素
document.domain 只包含页面的域名将document.domain值设置为相同的值，可以在不同子域名页面通过js通信
document.URL
document.referrer 保存着链接到当前页面的那个页面的URL

查找元素

document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.anchors
document.images
document.links
document.implementation.hasFeature()
document.write(string)
document.writeIn(string) 在字符串的末尾添加一个换行符
document.open()
document.close()
document.createElement() 创建新元素

# Element类型

所有HTNL元素（标签）

a、abbr缩写、acronym（废弃）、address地址、applet（废弃）、area、article、aside、b、base、basefont（废弃）、bdo、big（废弃）、blockquote引用、body、br、button、caption表格标题、center（废弃）、cite表示作品的引用、code、col表格的列、colgroup一组列表、dd、del从文档中删除的文字内容、dfn、dir（废弃）目录、div、dl、dt、em、fieldset、figcaption、figure、font、form、footer、frame、frameset、h1、h2、h3、h4、h5、h6、head、header、hgroup、hr、html、i、iframe、img、input、ins文档中添加的内容、isindex（废弃）、kbd键盘输入、label、legend、li、link、main、map、menu、meta、nav、noframes、noscript、object、ol、optgroup、option、p、param、pre自定义格式文本、q、s、samp、script、select、section、small、span、strike、strong、style、sub、sup、table、tbody、td、textarea、tfoot、th、thead、title、tr、tt、u、ul、var attribute 取得特性
getAttribute()
setAttribute()
removeAttribute()

attribute属性

element.attribute.getNamedItem(name) 返回nodeName属性等于name的节点
element.attribute.removeNamedItem(name) 移除节点
element.attribute.setNamedItem(node) 向列表添加节点
element.attribute.item(pos) 返回位于数字pos位置的节点

迭代元素的每一个特性，然后将它们构造成name = 'value' name = 'value'这样的字符串格式

function outputAttribute(element) {
  var pairs = [],
      attrNmae,
      attrValue,
      i,
      len;
  for(i=0; len = element.attributes.length;i<len;i++) {
    attrName = element.attributes[i].nodeName;
    attrValue = element.attribute[i].nodeValue;
    if(element.attributes[i].specified){
      pairs.push(attrName + '=\' '+ attrValue+ '\'')
    }
  }
  return pairs.join(' ')
}

# Text类型

appendData(text) 将text添加到节点的末尾
deleteDate(offset, count)
insertData(offset, text)
replaceData(offset, count, text)
splitText(offset)
substringData(offset, count)
document.createTextNode() 创建文本节点

# 10.2 DOM操作技术

function loadScript(url){
  var script = document.createElement('script')
  script.src = url;
  document.body.appendChild(secript);
  loadScript('client.js')
}

动态样式

function loadStyle(url){
  var link = doucment.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = url ;
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(link)
}
loadStyle('style.css')

表格

// 常见table
var table = doucment.createElemnt('table');
table.border = 1;
table.width = '100%';

// 创建tbody
var tbody = document.createElemnt('tbody');
table.appendChild(tbody)

// 创建第一行
tbody.inserRow(0);
tbody.rows[0]

# 10.3 小结

DOM是语言中立的API，用于访问和操作HTML和XML文档。DOM1级将HTML和XML文档形象地看做一个层次的节点树，可以使用JavaScript来操作这个节点树，进而改变底层文档的外观和结构。

DOM由各种节点构成，简要总结如下：

最基本的节点类型是Node，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自Node。
Document 类型表示整个文档，是一组分层节点的根节点。在JavaScript中，document对象是Document的一个实例。使用document对象，有很多种方式可以查询和取得节点。
Element节点表示文档中所有HTML或XML元素，可以用来操作这些元素的内容和特性。
另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA区域和文档片段。

访问DOM的操作在多数情况下都很直观，不过在处理script和style元素时还是存在一些复杂性。由于这两个元素分别包含脚本和样式信息，因此浏览器通常会将它们与其他元素区别对待。这些区别对待导致了在针对这些元素使用innerHTML时，以及在创建新元素时的一些问题。

理解DOM的关键，就是理解DOM对性能的影响。DOM操作往往是JavaScript程序中开销最大的部分，而因访问NodeList导致的问题为最多。NodeList对象都是“动态”的，这就意味着每次访问NodeList对象，都会运行一次查询。有鉴于此，最好的办法就是尽量减少DOM操作。

← 第9章客户端检测第11章 DOM扩展 →