1. IT知识观首页

第40节 DOM文档对象模型-Javascript-王唯

云烟 • • 未分类 • 阅读 192

第40节 DOM文档对象模型-Javascript-王唯本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

欢迎大家来到IT世界,在知识的湖畔探索吧!

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

DOM(Document Object Model，文档对象模型)：

DOM是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口；其定义了访问和处理文档的标准方法；是针对HTML和XML文档的一个API；

DOM描绘了一个层次化的节点树，允许开发者添加、移除和修改页面的某一部分，从而重构整个文档。

DOM脱胎于Netscape及微软创始的DHTML，但现在已经成为表现和操作页面标记的真正的跨平台、语言中立的方式；

DOM与具体的编程语言无关，可以在C、Javascript、ActionScript、Java等语言中实现；

DOM标准的目标是让“任何一种程序设计语言”能操控使用“任何一种标记语言”编写出的“任何一份文档”；

DOM 级别：

DOM Level 1：由两个模块组成：DOM核心（DOM Core）和DOM HTML；专注于 HTML 和 XML 文档模型，它含有文档导航和处理功能；

DOM Level 2：对 DOM1级做了扩展，添加了样式表对象模型，并定义了操作附于文档之上的样式信息的功能性；同时还定义了一个事件模型，并提供了对 XML 命名空间的支持；

DOM Level 3：对DOM2级做了扩展，规定了内容模型 (DTD 和 Schemas) 和文档验证，同时规定了文档加载和保存、文档查看、文档格式化和关键事件；

DOM Level 0：确切来说，不存在DOM0级，因为它不是 W3C 规范，而仅仅是对在 Netscape Navigator 3.0 和 Microsoft Internet Explorer 3.0 中的等价功能性的一种定义，实际上指的就是DHTML；

1998年10月 DOM1级规范成为W3C的标准，为基本的文档结构及查询提供了接口；

目前主流的浏览器都已实现了DOM1、基本实现了DOM2和3；

DOM组成：

  • Core DOM：定义了一套标准的针对任何结构化文档的对象，即用于XML和HTML的共用接口；
  • HTML DOM：在 DOM 核心的基础上加以扩展，定义了一套标准的针对HTML文档的接口对象；

XML：

XML 指可扩展标记语言（EXtensible Markup Language），它是一种标记语言，类似于HTML，它的设计宗旨是传输数据，而非显示数据；

XML 标签没有被预定义，需要开发者自定义标签；

XML 被设计为具有自我描述性，是W3C的推荐标准；

XML 的用途：把数据从 HTML 分离、简化数据共享、简化数据传输、简化平台的变更；

DOM树：

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构；

如HTML：

<html>
<head>
    <title>零点网络</title>
</head>
<body>
    <h1>零点程序员</h1>
    <p>zeronetwork <a href="#">王唯</a></p>
</body>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

树状图：

第40节 DOM文档对象模型-Javascript-王唯

树状图

每一个标签是是文档的一个节点，它表示一个Node对象；

节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记；

每种节点都拥有各自的特点、数据和方法，并且也与其他节点存在某种关系；

节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构；

文档节点（Document）：是每个文档的根节点；文档节点只有一个子节点，即<html>元素，也称为文档元素，它是文档最外层元素，其他所有元素都包含在文档元素中；每个文档只能有一个文档元素；在XML中，没有预定义的文档元素，因此任何元素都可能成为文档元素；

Node接口：

每一段标记都可以通过树中的一个节点来表示，这个节点称为Node；

DOM1级定义一个Node接口，其用于抽象地表示文档中一个独立的部分；

HTML元素通过元素节点表示，特性(attribute)通过特性节点表示，文档类型通过文档类型节点表示，注释通过注释节点表示，共12种节点类型，这些类型都继承自一个基类型Node类型，因此所有节点类型都共享着相同的基本属性和方法；

Node类型图：

第40节 DOM文档对象模型-Javascript-王唯

Node类型图

Document和Element类型与HTMLDocument和HTMLElement类型之间是有严格的区分的；Document类型代表一个HTML或XML文档，而HTMLDocment只是代表一个HTML文档，XMLDocument代表是XML文档；Element类型代表该文档中的一个元素，而HTMLElement只是HTML文档中的元素，不是XMLDocument中的元素；

HTMLElement的很多子类型代表HTML元素的具体类型，每个类型具有多个Javascript属性，这些属性对应具体的元素或元素组的HTML元素特性；这些具体的元素类也定义了额外的属性和方法，它们并不是简单的映射HTML元素及HTML元素特性；

每个节点都有一个nodeType属性，用于表明节点的类型；

节点类型由在Node类型中定义的下列12个常数值来表示；

  • Node.ELEMENT_NODE(1)
  • Node.ATTRIBUTE_NODE(2)
  • Node.TEXT_NODE(3)
  • Node.CDATA_SECTION_NODE(4)
  • Node.ENTITY_REFERENCE_NODE(5)
  • Node.ENTITY_NODE(6)
  • Node.PROCESSING_INSTRUCTION_NODE(7)
  • Node.COMMENT_NODE(8)
  • Node.DOCUMENT_NODE(9)
  • Node.DOCUMENT_TYPE_NODE(10)
  • Node.DOCUMENT_FRAGEMENT_NODE(11)
  • Node.NOTATION_NODE(12)
欢迎大家来到IT世界,在知识的湖畔探索吧!<div id="mydiv">零点程序员</div>
<script>
var mydiv = document.getElementById("mydiv");
console.log(mydiv.nodeType);  // 1
console.log(Node.ELEMENT_NODE);  // 1
if(mydiv.nodeType == Node.ELEMENT_NODE)
    alert("mydiv is an element");
// IE8以下不支持，可以如此判断
if(mydiv.nodeType == 1)
alert("IE8: mydiv is an element");
</script>

Node属性：

nodeName : String，节点的名字，取决于节点的类型；

nodeValue : String，节点的值，取决于节点的类型；

nodeType : Number，节点的类型常数值之一；

注：对于元素节点，nodeName保存的始终是元素的标签名，而nodeValue的值为null；因此在使用nodeName及nodeValue时，最好先检测一下节点的类型；

var mydiv = document.getElementById("mydiv");
console.log(mydiv.nodeType);  // 1
console.log(mydiv.nodeName);  // DIV
console.log(mydiv.nodeValue);  // null
if(mydiv.nodeType == Node.ELEMENT_NODE){
    console.log(mydiv.nodeType);  // 1
    console.log(mydiv.nodeName);  // DIV
}
var txt = mydiv.firstChild;
if(txt.nodeType == Node.TEXT_NODE){
    console.log("nodeType:" + txt.nodeType);  // 3
    console.log("nodeName:" + txt.nodeName);  // #text
    console.log("nodeValue:" + txt.nodeValue);  // 零点程序员
}

文档中所有节点之间都存在着各种关系，理清这些关系是非常重要的；

childNodes属性：

返回NodeList类型的所有子节点集合;

NodeList是一种类数组的对象，用于保存一组有序的节点，可以通过方括号来访问保存在其中的节点，其拥有length 属性；

欢迎大家来到IT世界,在知识的湖畔探索吧!<div id="mydiv">
    <h2>零点程序员</h2>
    <h3>zeronetwork</h3>
    <div>从事IT教育，开展<a href="#">Web前端</a>、后端开发教育</div>
</div>
<script>
var mydiv = document.getElementById("mydiv");
// dom.html:16 NodeList(7) [text, h2, text, h3, text, div, text]
console.log(mydiv.childNodes); 
console.log(mydiv.childNodes.length);  // 7
var firstChild = mydiv.childNodes[1];  // 如果是0，即#text节点，此处是个空格
console.log(firstChild);    // <h2>零点程序员</h2>
console.log(firstChild.nodeName);  // H2
var secondChild = mydiv.childNodes.item(3);
console.log(secondChild);  // <h3>zeronetwork</h3>
</script>

注：mydiv有三个子节点，但length却是7个，多出4个text节点，此text节点，实际上是代码中的换行或空格，如果把html代码删除换行或空格，length结果就是3；

NodeList对象的特点：是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中；

var mydiv = document.getElementById("mydiv");
console.log(mydiv.childNodes.length); // 7
var p = document.createElement("p");
p.innerText = "大师哥王唯";
mydiv.appendChild(p);
console.log(mydiv.childNodes.length);  // 8

在实际应用中，有可能需要将NodeList对象转换成数组：

var mydiv = document.getElementById("mydiv");
var arrNodes = Array.prototype.slice.call(mydiv.childNodes,0);
console.log(arrNodes);

children属性：

IE与其他浏览器对文本节点中空白符的解释不一致，导致了children属性出现；这个属性是HTMLCollection的实例，其中只包含元素的子节点中那些也是元素的节点，即children列表中只包含Element元素；

children并不是标准属性，但所有的浏览器都实现了该属性；

var myList = document.getElementById("myList");
var lis = myList.children;
console.log(lis);
console.log(lis.length);

Text和Comment节点没有children属性；

HTMLCollection类型：

是一个接口，表示HTML 元素的集合，与NodeList非常类似，也是个类数组对象；元素在 HTMLCollection 对象中的顺序与它们在文档源代码中出现的顺序一样；

HTMLCollection类型的属性和方法：

item()方法：返回 HTMLCollection 中指定索引的元素；

length属性：返回 HTMLCollection 中元素的数量；

namedItem()方法：返回 HTMLCollection 中指定 ID 或 name 属性的元素；

console.log(lis.item(0));
console.log(lis[0]);  // 一般用这个代替
console.log(lis.namedItem("myli"));
console.log(lis["myli"]);  // 一般用这个代替

与NodeList类型一样，HTMLCollection对象也是实时动态的；

parentNode属性：

指向节点的父节点；

一个元素节点的父节点可能是一个元素(Element )节点，也可能是一个文档(Document )节点，或者是个文档碎片(DocumentFragment)节点；

对于Document、DocumentFragment和Attr对象来说，其parentNode属性为null，因为它们没有父节点；

另外，如果当前节点刚刚被建立，还没有被插入到DOM树中，则该节点的parentNode属性也返回null；

var elt = document.getElementById("elt");
if(elt.parentNode){
    elt.parentNode.removeChild(elt);
}

parentElement属性：

返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null；parentElement是一个DOM元素对象（HTMLElement对象）；

if(elt.parentElement)
    elt.parentElement.style.backgroundColor = "purple";

在早期，parentElement是ie专用的，而现在所有的浏览器都已经实现了，并且被纳入了最新的DOM4规范中；

parentElement匹配的是parent为Element的情况，而parentNode匹配的则是parent为Node的情况；Element是包含在Node里的，它的nodeType是1；一般情况parentNode可以取代parentElement的所有功能；

最能体现两者的区别是以下两行代码：

console.log(document.documentElement);  // <html>
console.log(document.documentElement.parentNode);  // #document
console.log(document.documentElement.parentElement);  // null

previousSibling: 前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null；

nextSibling : 后一个兄弟节点：如果这个节点就是最后一个兄弟节点，那么该值为null；

var mydiv = document.getElementById("mydiv");
console.log(mydiv.parentNode);  // <body>
var firstChild = mydiv.childNodes[0];  // 把0换成1或2
console.log(firstChild.previousSibling);
console.log(firstChild.nextSibling);
if(firstChild.nextSibling === null)
    console.log("child is last node");
else
console.log("child is't last node");
// 遍历
var elt = document.getElementById("elt");
while(elt){
    console.log(elt.nodeName);
    elt = elt.nextSibling;
}

firstChild : 指向在childNodes集合中的第一个节点；

lastChild : 指向在childNodes集合中最后一个节点；

即firstChild始终指向childNodes[0]；lastChild指向childNodes[someNode.childNodes.length – 1]；

var mydiv = document.getElementById("mydiv");
var firstChild = mydiv.firstChild;
var lastChild = mydiv.lastChild;
console.log(firstChild);
console.log(lastChild);

注：当只有一个子节点的情况下，firstChild和lastChild指向同一个节点；如果没有子节点，均为null；并不是每种节点都有子节点；

<div id="mydiv"><h2>零点<span>程序员</span></h2></div>
<script>
    var textChild = mydiv.firstChild.firstChild;
    console.log(textChild.nodeType);  // 3 文本节占
    console.log(textChild.childNodes); // 空的NodeList[]
</script>

textChild指的是零点，而不是零点<span>程序员</span>；

ownerDocument 属性:

指向这个节点所属的文档节点（也就是顶层节点）；

任何节点都属于它所在的文档，任何节点都不能同时存在于两个或多个文档中，通过这个属性不必层层回溯到顶端，而是直接访问到文档节点；

var mydiv = document.getElementById("mydiv");
console.log(mydiv.ownerDocument); // #document
var innerDiv = document.getElementById("innerDiv");
console.log(innerDiv.ownerDocument); // #document
console.log(mydiv.ownerDocument.documentElement);  // <html>

节点层次关系图：

第40节 DOM文档对象模型-Javascript-王唯

节点层次关系图

Node方法（操作节点）：

appendChild(node) : 将node添加到childNodes的末尾; 添加节点后，childNodes的新添节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新；更新后，appendChild()返回新增的节点；

var mydiv = document.getElementById("mydiv");
var p = document.createElement("p");
p.innerText = "大师哥王唯";
var returnP = mydiv.appendChild(p);
console.log(mydiv.lastChild);  // <p>大师哥王唯</p>
console.log(p === returnP);  // true

如果传入appendChild()的节点已经是文档的一部分了，就将该节点从原来的位置转移到新位置；即任何DOM节点不能同时出现在文档中的多个位置上；

<script>
var mydiv = document.getElementById("mydiv");
var yourdiv = document.getElementById("yourdiv");
// 注：把最后的子元素的空白符删除
var returnDiv = yourdiv.appendChild(mydiv.lastChild);
console.log(returnDiv === mydiv.lastChild);  // false
console.log(returnDiv === yourdiv.firstChild);  // true
</script>

如果在调用appendChild()方法时，传入了父节点的第一个子节点，那么，该节点就会成为父节点中的最后一个子节点，如：

// 注意html中的换行空格
var mydiv = document.getElementById("mydiv");
console.log(mydiv.firstChild);
mydiv.appendChild(mydiv.firstChild);
console.log(mydiv.firstChild);

需要注意的问题；

var divs = document.getElementsByTagName("div");
var btn = document.createElement("input");
btn.type = "button";
btn.value = "按钮";
for(var i=0; i<divs.length; i++){
    console.log(divs[i]);
    divs[i].appendChild(btn);
}

本来的意图是为了给所有的div添加input子元素，可却终只是最后的div添加了，原因是一个元素只能有一个父元素，起先，第一个div的确添加了input的元素，便是循环中的appendChild()会让元素从原来的位置转移到新位置；

改写：把创建btn的代码放到for循环内，即可达到目的；

由于appendChild()返回的是被追加的子元素，所以在链式调用时不能随便使用；

var elt = document.createElement('p').appendChild(document.createElement('b'));
console.log(elt);  // elt为<b></b>

本意是返回一个p节点，并且这个p元素包含一个b的子节点，但实际上elt为b；

// 改成
var elt = document.createElement('p')
elt.appendChild(document.createElement('b'));
console.log(elt);  // <p>
document.body.appendChild(elt);

insertBefore(newnode, refnode)方法：

在childNodes中的refnode之前插入newcode，并返回这个节点；

插入节点后，被插入的节点（新节点）会变成参照节点的前一个兄弟节点；如果参照节点是null，则与appendChild()执行相同的操作；

var mydiv = document.getElementById("mydiv");
var p = document.createElement("p");
p.innerText = "大师哥王唯";
// 或者参照mydiv.firstChild节点
var returnP = mydiv.insertBefore(p,null);  // 插入后成为最后一个子节点
console.log(mydiv.lastChild);  // <p>大师哥王唯</p>
var returnP = mydiv.insertBefore(p, mydiv.firstChild);  // 插入后成为第一个子节点
console.log(mydiv.firstChild);  // <p>大师哥王唯</p>
var returnP = mydiv.insertBefore(p, mydiv.lastChild);  // 插入到最后子节点的前面
console.log(mydiv.childNodes[mydiv.childNodes.length - 2]);// <p>大师哥王唯</p>
var returnP = mydiv.insertBefore(p,mydiv.childNodes[1]);  // 插入到任意节点的前面
console.log(mydiv.childNodes[1]);  // <p>大师哥王唯</p>
var yourdiv = document.getElementById("yourdiv");
yourdiv.insertBefore(mydiv.childNodes[1],null);//把mydiv的子节点插入到yourdiv中

参照节点refnode是必选参数，如果没有，则传null，否则会抛出异常；如果传递undefined，则会隐式转换；

// mydiv.insertBefore(elt); // 异常
mydiv.insertBefore(elt,undefined); // undefined隐式转换
// mydiv.insertBefore(elt,"undefined"); // 异常

如果给定的子节点是文档中现有的节点，insertBefore() 会将其从当前位置移动到新位置；

var elt = document.getElementById("elt");
var mydiv = document.getElementById("mydiv");
mydiv.insertBefore(elt,mydiv.firstChild); // elt被移到mydiv内的第一个位置

提供一个使用索引位置插入节点的简单函数；

// 将child节点插入到parent中，使其成为第n个子节点
function insertAt(parent, child, index){
    if(index < 0 || index > parent.childNodes.length)
        throw new Error("invalid index.");
    else if(index == parent.childNodes.length)
        parent.appendChild(child);
    else
        parent.insertBefore(child, parent.childNodes[index]);
}
var mydiv = document.getElementById("mydiv");
insertAt(mydiv,document.createTextNode("零点程序员"),mydiv.childNodes.length);
没有insertAfter()方法，不过，可以使用insertBefore()和nextSibling()来模拟它；
// 如果refNode就是最后一个子节点，那么refNode.nextSibling为null
Element.prototype.insertAfter = function(newNode,refNode){
    this.insertBefore(newNode, refNode.nextSibling);
}
mydiv.insertAfter(elt,mydiv.firstChild);  // 插入到第二个位置
mydiv.insertAfter(elt,mydiv.lastChild);  // 插入到最后

removeChild(node)方法：

移除子节点，并返回被移除节点

var mydiv = document.getElementById("mydiv");
var deleteChild = mydiv.removeChild(mydiv.firstChild);
console.log(deleteChild);
// 删除的节点还可以再次使用
var yourdiv = document.getElementById("yourdiv");
yourdiv.appendChild(deleteChild);
console.log(yourdiv.firstChild);

被移除的节点仍然还在文档中，但它在文档中已经没有了自己的位置，但如果被删除节点没有变量引用它，在一定的时间内将会被内存管理器回收；

但如果被删除的子节点，一开始就被变量引用，即使该节点被删除，其还被保持着引用；

var mydiv = document.getElementById("mydiv");
var deleteChild = mydiv.removeChild(mydiv.firstChild);
console.log(deleteChild === mydiv.firstChild);  // false
// 改成
var deleteChild = mydiv.firstChild;
var returnChild = mydiv.removeChild(deleteChild);
console.log(deleteChild === returnChild); // true

removeChild()方法是在父节点上调用的，所以删除一个节点，一定先定位好父节点再删除子节点，比如要删除当前的元素，可以：

node.parentNode.removeChild(node);

删除所有子节点；

var mydiv = document.getElementById("mydiv");
for(var i=mydiv.childNodes.length-1; i>=0; i--){
    console.log(mydiv.childNodes[i]);
    mydiv.removeChild(mydiv.childNodes[i]);
}
console.log(mydiv);

为什么由后往前删除，因为childNodes返回的列表是动态的，每一次访问它都是被删除一个后的列表；因此，如果只是单纯的删除所有子节点，可以：

// 更简单的删除，或者把firstChild换成lastChild也可以
while(mydiv.firstChild)
    mydiv.removeChild(mydiv.firstChild);

replaceChild(newnode, oldnode) 方法:

删除一个子节点并用一个新的节点取而代之，即将childNodes中的oldnode 替换成newnode；

会返回被替换的节点oldnode，并从文档树中删除；

<div id="yourdiv">temp</div>
<script>
var mydiv = document.getElementById("mydiv");
var p = document.createElement("p");
p.innerText = "大师哥王唯";
var child = mydiv.replaceChild(p, mydiv.firstChild);
console.log(child);
var yourdiv = document.getElementById("yourdiv");
if(yourdiv.hasChildNodes()){
    var child = yourdiv.replaceChild(mydiv.lastChild,yourdiv.firstChild);
}
</script>

定义一个环绕节点的函数：

function roundNode(outerNodeString,innerNode){
    // 假如参数为字符串而不是节点，将其当做元素的id
    if(typeof innerNode == "string")
        innerNode = document.getElementById(innerNode);
    var parent = innerNode.parentNode;  // 取得父节点
    var outerNode = document.createElement(outerNodeString);
    parent.replaceChild(outerNode, innerNode);
    outerNode.appendChild(innerNode);
    return outerNode;
}
var mydiv = document.getElementById("mydiv");
roundNode("div",mydiv).style.color = "red";

cloneNode()方法：

用于创建调用这个方法的节点的一个完全相同的副本；

其接受一个参数，表示是否执行深复制，true为深复制，即复制节点及其整个子节点树； false，则为浅复制，即只复制节点本身，节点所包含的文本也不会被复制，默认为false；

var mydiv = document.getElementById("mydiv");
var cloneDiv = mydiv.cloneNode(true);
console.log(cloneDiv);

或

<ul id="mylist">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>Javascript</li>
</ul>
<script>
var myList = document.getElementById("mylist");
var deepList = myList.cloneNode(true);
var shallowList = myList.cloneNode(false);
console.log(deepList.childNodes.length);  // 7
console.log(shallowList.childNodes.length); // 0
</script>

复制后的节点副本属于文档所有，但并没有父节点，因此需要通过appendChild()、insertBefore或replaceChild将它添加文档中；

console.log(mydiv.parentNode);  // <body>
console.log(cloneDiv.parentNode);  // null
var yourdiv = document.getElementById("yourdiv");
yourdiv.appendChild(cloneDiv);  // 不符合标准，因为有两个id为mydiv元素
console.log(cloneDiv.parentNode);  // <div id="yourdiv">

cloneNode()方法不会复制添加到DOM节点中的Javascript属性，如事件处理程序等，但会复制特性、子节点；但如果是在标签中直接添加的on事件，也会被复制，因为它是被当作特性复制的；

var myList = document.getElementsByTagName("ul")[0];
var li3 = myList.childNodes[5]; // 第3个li
li3.addEventListener("click",function(e){
    alert(this.innerText);
},false);
var deepList = myList.cloneNode(true);
var yourdiv = document.getElementById("yourdiv");
yourdiv.appendChild(deepList);

如果原始节点设置了ID，并且克隆节点会被插入到相同的文档中，那么就应该修改克隆节点的ID以保证其唯一性；

console.log(deepList.id);  // mylist
deepList.id = "deeplist";
console.log(deepList.id);  // deeplist

normalize()方法：

合并节点，该方法唯一的作用就是处理文档树中的文本节点；由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况；当在某个节点上调用该方法时，就会在该节点的后代节点中查找上述两种情况；如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点；

hasChildNodes()方法：

判断节点是否有子节点，会返回一个布尔值；

var mydiv = document.getElementById("mydiv");
console.log(mydiv.childNodes.length);
console.log(mydiv.hasChildNodes());
if(mydiv.hasChildNodes())
    console.log("有子节点");
else
console.log("无");
// 如果源文件中有空白符，删除的是空白文本节点
if(mydiv.hasChildNodes())
    mydiv.removeChild(mydiv.firstChild);
// 全部删除
while(mydiv.hasChildNodes())
    mydiv.removeChild(mydiv.firstChild);

总结：判断一个节点是否有子节点，有三种方式；

node.firstChild !== null、node.childNodes.length > 0、node.hasChildNodes()方法；

contains()方法：

在实际开发中，经常需要知道某个节点是不是另一个节点的后代； 其接受一个后代节点，用于判断是否为当前元素的后代节点，如果是，返回true，否则为false；

console.log(document.documentElement.contains(document.body));
// 检查一个元素是否是body元素的后代元素且非body元素本身
function isInPage(node){
    return (node === document.body) ? false : document.body.contains(node);
}
console.log(isInPage(mydiv));
第40节 DOM文档对象模型-Javascript-王唯

Web前端开发之Javascript-零点程序员-王唯

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/37130.html

赞 (0)
云烟云烟
0

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询： 微信交谈

邮件：itzsgw@126.com

工作时间：时刻准备着!

关注微信