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