JavaScript高级程序设计——第十章（DOM）_javascript dom高级程序设计

一.节点层次

1. 节点关系
   文档中的所有节点有这样那样的关系。我们可以用父元素，子元素等关系来表示。每个节点都有一个childNodes属性。其中保存着一个NodeList对象。NodeList是一个类数组对象，用来保存一组有序的节点。

   有两种方法访问保存在NodeList中的节点

   var firstChild = someNode.childNodes[0]
   var firstChild = someNode.childNodes.item(0)
   1
   2

   每个节点都有一个parentNode属性，包含在childNodes列表中的节点都具有相同的父节点，因此他们的parentNode属性都指向同一个节点。与此同时，通过previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
   下面这张图很好的表现了节点之间的关系。
   

2. 操作节点

   DOM提供了一些操作节点的方法。最常用的方法是appendChild()，用于向childNodes列表的末尾添加一个节点。如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。

   var newNode = someNode.appendChild(someNode.firstNode)
   alert(newNode == some.lastNode)  //true
   1
   2

   如果需要把节点放在childNode列表中某个特定位置上，而不是放在结尾。那么可以使用insertBefore()方法，这个方法接受两个参数：要插入的节点和作为参照的节点。如果参照节点为null，那么该方法与appendChild()方法执行相同的操作。

   //插入后成为第一个子节点
   var returnNode = someNode.insertBefore(newNode,someNode.firstChild)
   alert(returnNode == someNode.firstNode)  //true
   1
   2
   3

   前面的两个方法都不会移除节点。replaceChild()方法接受的两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档中被移除。

   //替换第一个子节点
   var returnNode = someNode.replaceChild(newNode,someNode.firstChild)
   1
   2

   使用replaceChild()插入一个节点时，该节点的所有关系指针都会从被他替换的节点复制过来。

   如果想彻底移除一个节点，可以使用**removeChild()**移除。

   克隆节点：cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()接受一个布尔值参数，表示是否执行深复制。参数为true时，执行深复制，也就是复制节点和整个节点树；在参数是false时，执行浅复制，即只复制节点本身。

   处理文本节点：normalize()，用于处理文档树种的文本节点。当出现文本节点不包含文本，或者接连出现两个文本节点的情况。如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将他们合并为一个文本节点。

3. Document类型
   document对象是window对象的一个属性，因此可以将其作为全局对象来访问。
   document有两个内置的访问其子节点的方式。第一个是documentElement属性，该属性始终指向HTML页面中的html元素。
   还有一个body属性，直接指向body元素。

   查找元素：我们最常用的DOM应用，就是取得特定的某个或某组元素。Document类型为此提供了两个方法：getElementById()和getElementByTagName()。

   getElementById()：如果页面中多个元素的ID值相同，则只返回文档中第一次出现的元素。（IE7及更低版本有例外，详情看书哦
   ）。
   getElementByTagName()：这个方法返回时包含零或多个元素的NodeList。如果想获取页面上的所有元素，可以使用getElementByTagName(‘*’)。

   getElementByName()：这个方法会返回带有给定name特性的所有元素。最长用到的情况的是取得单选按钮。

4. Element类型
   取得特性：每个元素有一组或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法有三个，分别是getAttribute()，setAttribute()，removeAttribute()。

   <div id = 'myDiv' class = 'bd' title = 'maybe' lang = 'en' dir = 'ltr'>
   var div = document.getElementById('myDiv')
   alert(div.getAttribute('id'))  //myDiv
   alert(div.getAttribute('class'))  //bd
   alert(div.getAttribute('title'))  //maybe
   alert(div.getAttribute('lang'))  //en
   alert(div.getAttribute('dir'))  //ltr
   1
   2
   3
   4
   5
   6
   7

   任何元素的特性，也可以通过DOM元素本身的属性来访问。比如：

   alert(div.getAttribute('id'))  //myDiv
   alert(div.id)  //myDiv
   1
   2

   但是，只有公认的（非自定义的）特性才会以属性的形式添加到DOM对象中，自定义的属性还是老老实实用getAttribute()吧。

   设置特性：setAttribute()，这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，则会以指定的值替换现有的值。

   div.setAttribute('id','chalice')
   1

   删除特性：removeAttribute()，用于彻底删除元素的特性。

   div.removeAttribute('id')
   1

5. 创建元素
   document.createElement()方法可以创建新元素。这个方法只接受一个参数，那就是创建元素的标签名。

   var div = document.createElement('div')
   
   div.id = 'chalice'
   div.className = 'xnova'
   
   var div = document.createElement('<div id = 'chalice' class = 'xnova'>')
   1
   2
   3
   4
   5
   6

   上面两种写法都可以实现，但是下面的写法有助于避免IE7及更早版本中动态创建元素的某些问题。（详情看书哦）

6. Text类型
   创建文本节点：document.createTextNode()，这个方法接受一个参数——要插入节点中的文本。

   var textNode = document.createTextNode('<h1>Hello<h1>')
   1

   规范化文本节点：normalize()，如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点。节点的nodeValue值就是每个文本的nodeValue的值拼接起来的值。

   分隔文本节点：跟normalize()相反的方法：splitText()

   var element = document.createElement('div')
   element.className = 'message'
   
   var textNode = document.createTextNode('hello world')
   element.appendChild(textNode)
   
   document.body.append(element)
   
   var newNode = element.firstChild.splitText(5)
   alert(element.firstChild.nodeValue)  //'hello' 原本的文本包含从开始到指定位置之前的内容
   alert(newNode.nodeValue)  //'world' 新文本节点包含剩下的文本
   alert(element.childNodes.length)  //2
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

二.DOM操作技术

1. 动态脚本
   我们动态加载外部的js文件可以立即执行。如下：

   <script type='text/javascript' src='fy.js'></script>
   1

   我们如果想在页面其他地方使用一个外部脚本文件，我们可以使用一个函数封装引入js文件的方法，如下：

   function loadScript(url){
   	var script = document.createElement('script')
   	script.type = 'text/javascript'
   	script.src = url
   	document.body.appendChild(script)
   }
    
    loadScript('fy.js')
   1
   2
   3
   4
   5
   6
   7
   8

2. 动态样式
   我们动态加载外部的css文件可以立即执行。如下：

   <link rel = 'stylesheet' type = 'text/css' href = 'style.css'>
   1

   我们如果想在页面其他地方使用一个外部脚本文件，我们可以使用一个函数封装引入css文件的方法，如下：

   function loadStyles(url){
   	var link = document.createElement('link')
   	link.rel = 'stylesheet' 
   	link.type = 'text/css'
   	link.href = url
   	var head = document.getElementByTagName('head')[0]
   	head.appendChild(link)
   }
    
    loadStyles('style.css')
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10