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

浏览数：21 / 时间：2015年06月09日

《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