JavaScript高级程序设计 第10章 DOM

10.1 节点层次 对象

10.1.1 Node类型

除了 IE 之外，其他浏览器都能访问到 Node 类型，里面声明了所有节点的类型

常用的：

• NODE.ELEMENT_NODE(1)：元素节点
• NODE.ATTRIBUTE_NODE(2)：属性节点
• NODE.TEXT_NODE(3)：文本节点
• NODE.COMMENT_NODE(8)：注释节点
• NODE.DOCUMENT_NODE(9)：文档节点

 

1、nodeName 和 nodeValue 属性

nodeName 属性含有某个节点的名称。

• 元素节点的 nodeName 是标签名称（返回的名称是大写的）
• 属性节点的 nodeName 是属性名称（返回的名称是大写的）
• 文本节点的 nodeName 永远是 #text
• 文档节点的 nodeName 永远是 #document
• 注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

 

nodeValue

• 对于文本节点，nodeValue 属性包含文本。
• 对于属性节点，nodeValue 属性包含属性值。
• nodeValue 属性对于文档节点和元素节点是不可用的。

 

2、节点关系

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。（包括所有节点）

访问节点方式

• someNode.childNodes[0]
• someNode.childNodes.item(0)
• someNode.firstChild()
• someNode.lastChild()
• someNode.nextSibling()
• someNode.previousSibling()
• someNode.hasChildNodes()：包含一个或多个节点的情况下返回 true
• someNode.ownerDocument：该属性指向表示整个文档的文档节点

 

3、操作节点

• appendChild(node)：在childNodes 列表末尾添加一个节点，如果添加的节点已经是文档的一部分了，那么从原来的 位置移到 childNodes 列表末尾。返回添加的节点
• insertBefore(要插入的节点, 参照的节点)：把节点插入参照节点之前。返回添加的节点
• replaceChild(要插入的节点，要替换的节点)：返回替换的节点
• removeChld(要删除的节点)：返回移除的节点
• cloneNode(boolean)：用于复制节点，如果 boolean 为true为深拷贝，会复制整个节点数，否则只复制单个节点
  • 这个方法不会复制添加到 DOM 节点中的 JavaScript 属性以及事件。

 

10.1.2 Document 类型

document 是 HTMLDocument 的一个实例，即(HTMLDocument.prototype.isPrototypeOf(document)  === true)

• nodeType == 9
• nodeName =='#document'
• nodeVal == parentNode == ownerDocument == null
• 其子节点可能是 DocumentType、Element、ProcessingInstruction、Comment

 

1、文档的子节点

• document.documentElement 指向 html
• document.body 指向 body

2、文档信息

• document.title
• document.url：取得页面完整 URL
• document.domain：返回页面域名（有二级域名只返回上级域名）
  • 因为来自不同子域的页面无法通过 JS 进行通信。而通过将每个页面的 document.domain 设置为相同的值，解决跨域的问题，这些页面就可以互相访问对方包含的 js 对象了。
• document.referrer：取得来源页面的 URL

3、查找元素

• document.getElementById()
• document.getElementsByTagName
• document.getElementsByName()
• document.querySelector()
• document.querySelectorAll()

PS：NodeList 和 HTMLCollection 都是“ 动态的 ”，所有 NodeList 对象都是在访问 DOM 文档时实时运行的查询。除了 querySelectorAll

所以要尽可能的减少访问 NodeList 的参数，因为每次访问 NodeList，都会运行一次基于文档的查询。所以，要竟可能的从NodeList中取得的值缓存起来。

 

10.2.1 动态脚本

function loadScript(url, callback) {
  const script = document.createElement('script')
  script.type = 'text/javascript'
  // 为 script 回调函数监听加载完成时间
  if (script.readyState) {
    script.onreadystatechange = function() {
      if (script.readyState == "loaded" || script.readyState == "complete") {
        script.onreadystatechange = null
        callback()
      }
    }
  } else {
    script.onload = function () { callback() }
  }
  script.src = url
  document.body.appendChild(script)
}
loadScript('https://cdn.repository.webfont.com/wwwroot/js/jquery-1.10.2.min.js', 
function success(){ console.log("sucess") })

 

10.2.2 动态样式

function loadStyle(url) {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.type = 'text/css'
  link.href = url
  document.querySelector('head').appendChild(link)
}

 

 

NodeList 和 HTMLCollection

HTMLCollection和NodeList的共同点

    1. 都是类数组对象，都有length属性

    2. 都有共同的方法：item，可以通过item(index)或者item(id)来访问返回结果中的元素

    3. 都是实时变动的（live），document上的更改会反映到相关对象上（例外：document.querySelectorAll返回的NodeList不是实时的）

HTMLCollection和NodeList的区别是：

    1. NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（elementNode），elementNode就是HTML中的标签

    2. HTMLCollection比NodeList多一项方法：namedItem，可以通过传递id或name属性来获取节点信息