【JavaScript高级程序设计(第3版) #BOOK#】第10章 DOM — 10.1.1 Node类型

《JavaScript高级程序设计(第3版)》

 

<ul> <li>1</li> <li>2</li> <li>3</li> </ul>

 

 

节点类型

/** 
 * nodeType
 *
 * 常用节点类型
 * 元素节点 Node.ELEMENT_NODE(1)
 * 文本节点 Node.TEXT_NODE(3)
 *
 * 兼容
 * Node.ELEMENT_NODE 在 IE 中无效 */ var ulNode = document.getElementsByTagName(‘ul‘)[0] if (ulNode.nodeType == 1) {
    console.log(‘Node is an element.‘)
}

 

/**
 * nodeName nodeValue
 *
 * 对于节点元素,nodeName中保存的始终都是元素的标签名,而nodeValue的值则始终未null */ if (ulNode.nodeType == 1) {
    console.log(ulNode.nodeName, ulNode.nodeValue)
}
console.log(ulNode.childNodes[0].nodeName, ulNode.childNodes[0].nodeValue)

 

 

节点关系

/**
 * childNodes parentNode previousSibling nextSibling firstChild lastChild hasChildNodes ownerDocument
 *
 * 每个节点都有一个childNodes属性,其中保存着一个NodeList对象
 * NodeList是有生命、有呼吸的对象,而不是在我们第一次访问它们的某个瞬间拍摄下来的一张快照
 * 列表中第一个节点的previousSibling属性值为null
 * 列表中最后一个节点的nextSibling属性值为null
 * someNode.firstChild == someNode.childNodes[0]
 * someNode.lastChild == someNode.childNodes[someNode.childNodes.length - 1] */ var firstChild = ulNode.childNodes[0] var secondChild = ulNode.childNodes.item(1) var count = ulNode.childNodes.length
console.log(firstChild, secondChild, count)
console.log(firstChild.parentNode)
console.log(ulNode.hasChildNodes())
console.log(ulNode.ownerDocument)

 

 

操作节点

/**
 * appendChild insertBefore replaceChild removeChild
 *
 * 添加节点后,childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。
 * 更新完成后,appendChild() 返回新增的节点
 * 如果参照节点是null,则insertBefore与appendChild执行相同的操作
 * replaceChild(要插入的节点, 要替换的节点) */ var returnedNode = ulNode.appendChild(ulNode.childNodes[1])
console.log(returnedNode == ulNode.lastChild) var returnedNode = ulNode.insertBefore(ulNode.childNodes[4], ulNode.firstChild)
console.log(returnedNode == ulNode.firstChild)

 

/* * cloneNode
 * IE9之前的版本不会为空白符创建节点 */ console.log(‘==================================================‘) var deepList = ulNode.cloneNode(true) var shallowList = ulNode.cloneNode(false)
console.log(deepList.childNodes.length, shallowList.childNodes.length) // 3或7(IE<9或其他浏览器) 0

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。