龙空技术网

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

零点程序员 123

前言:

现在你们对“js中span”大致比较关切,大家都想要分析一些“js中span”的相关内容。那么小编也在网摘上收集了一些对于“js中span””的相关资讯,希望你们能喜欢,各位老铁们快快来学习一下吧!

本内容是《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>

树状图:

树状图

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

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

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

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

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

Node接口:

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

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

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

Node类型图:

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)

<div id="mydiv">零点程序员</div><script>var mydiv = document.getElementById("mydiv");console.log(mydiv.nodeType);  // 1console.log(Node.ELEMENT_NODE);  // 1if(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);  // 1console.log(mydiv.nodeName);  // DIVconsole.log(mydiv.nodeValue);  // nullif(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 属性;

<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);  // 7var firstChild = mydiv.childNodes[1];  // 如果是0,即#text节点,此处是个空格console.log(firstChild);    // <h2>零点程序员</h2>console.log(firstChild.nodeName);  // H2var 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); // 7var 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);  // #documentconsole.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或2console.log(firstChild.previousSibling);console.log(firstChild.nextSibling);if(firstChild.nextSibling === null)    console.log("child is last node");elseconsole.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); // #documentvar innerDiv = document.getElementById("innerDiv");console.log(innerDiv.ownerDocument); // #documentconsole.log(mydiv.ownerDocument.documentElement);  // <html>

节点层次关系图:

节点层次关系图

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);  // falseconsole.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为nullElement.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);  // 7console.log(shallowList.childNodes.length); // 0</script>

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

console.log(mydiv.parentNode);  // <body>console.log(cloneDiv.parentNode);  // nullvar 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个lili3.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);  // mylistdeepList.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("有子节点");elseconsole.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));

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

标签: #js中span #jsapi文档 #js获取父级 #dhtmljs #csssecondchild