【javascript】DOM—节点层次—Node类型

作者: shanruopeng | 来源:发表于2017-11-27 16:23 被阅读3次

【javascript】DOM—节点层次—Node类型
JavaScript高级程序设计笔记10
Elements & Node
JavaScript 高级程序设计(第10章 DOM）
【DOM】Node类型
【javascript】DOM—节点层次—Document类型
web前端--DOM
DOM（Document Object Model）
HTML DOM(二)
DOM相关

节点层次

DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构。
节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。

Node类型

每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列的数值常量来表示。

var type = node.nodeType;

节点类型常量

常量	值	描述
Node.ELEMENT_NODE	1	一个元素节点，例如 <p> 和 <div>。
Node.TEXT_NODE	3	Element 或者 Attr 中实际的文字
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction ，例如 <?xml-stylesheet ... ? > 声明。
Node.COMMENT_NODE	8	一个 Comment 节点。
Node.DOCUMENT_NODE	9	一个 Document 节点。
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

已弃用的节点类型常量

常量	值	描述
Node.ATTRIBUTE_NODE	2	元素的耦合属性。在 DOM4 规范里Node 接口将不再实现这个元素属性。
Node.CDATA_SECTION_NODE	4	一个 CDATASection。在 DOM4 规范里被移除。
Node.ENTITY_REFERENCE_NODE	5	一个 XML 实体引用节点。在 DOM4 规范里被移除。
Node.ENTITY_NODE	6	一个 XML <!ENTITY ...> 节点。在 DOM4 规范中被移除。
Node.NOTATION_NODE	12	一个 XML <!NOTATION ...> 节点。在 DOM4 规范里被移除.

/**不同的节点类型**/
document.nodeType === Node.DOCUMENT_NODE; // true
document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true

var fragment = document.createDocumentFragment();
fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true

var p = document.createElement("p");
p.textContent = "一点人生经验...";

p.nodeType === Node.ELEMENT_NODE; // true
p.firstChild.nodeType === Node.TEXT_NODE; // true

/**注释**/
var node = document.documentElement.firstChild;
if (node.nodeType != Node.COMMENT_NODE)
  console.log("滚去写注释！");

1、nodeName和nodeValue属性

if (someNode.nodeType == 1){
    value = someNode.nodeName; //nodeName 的值是元素的标签名
}

2、节点关系

每个节点都有一个childNodes 属性，其中保存着一个NodeList 对象。
NodeList 对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList 对象中。

//如何访问保存在NodeList 中的节点
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

将NodeList 对象转换为数组

//在IE8 及之前版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
/**由于IE8 及更早版本将NodeList实现为一个COM 对象，在IE 中将NodeList 转换为数组，必须手动枚举所有成员。**/
function convertToArray(nodes){
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器
    } catch (ex) {
        array = new Array();
        for (var i=0, len=nodes.length; i < len; i++){
            array.push(nodes[i]);
        }
    }
    return array;
}

每个节点都有一个parentNode 属性，该属性指向文档树中的父节点。
包含在childNodes 列表中的每个节点相互之间都是同胞节点。
通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
列表中第一个节点的previousSibling属性值为null，而列表中最后一个节点的nextSibling 属性的值同样也为null。

if (someNode.nextSibling === null){
    alert("Last node in the parent’s childNodes list.");
} else if (someNode.previousSibling === null){
    alert("First node in the parent’s childNodes list.");
}

如果列表中只有一个节点，那么该节点的nextSibling 和previousSibling 都为null。
所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。

3、操作节点

appendChild()，用于向childNodes 列表的末尾添加一个节点。

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true

如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。

//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

insertBefore()方法，把节点放在childNodes列表中某个特定的位置上，
这个方法接受两个参数：要插入的节点和作为参照的节点。
插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()执行相同的操作.

//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

replaceChild()替换节点
此方法接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个
方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

removeChild()，用于移除节点

//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);

cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。
此方法接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false的情况下，执行浅复制，即只复制节点本身。
复制后返回的节点副本属于文档所有，但并没有为它指定父节点。

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

var myList = document.getElementsByTagName('ul')[0];
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE < 9）或7（其他浏览器）
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0