为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 DOM

DOM

标签：
JavaScript

DOM

IE中的所有DOM对象都是以COM对象的形式实现的。

节点层次

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型：

文档元素： 在HTML页面中，文档元素始终都是<html>元素,(在XML中何元素都可能成为文档元素)

12种DOM节点层次(继承自一个基类型)

  • 1、node类型

  • 2、Document类型

  • 3、Element类型

  • 4、Text类型

  • 5、Comment类型

  • 6、CDATASection类型(only XML文档)

  • 7、DocumentType(类型)(在Web浏览器中并不常用)

  • 8、DocumentFragment

  • 9、Attr类型

  • ... 其他

一、Node类型(12个数值常量来表明节点的类型。)

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。
JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

1、dom.nodeName 和 nodeValue

这两个属性的值完全取决于节点的类型,对于元素节点，node-Name中保存的始终都是元素的标签名，而nodeValue的值则始终为null。

2、节点的关系 childNodes 、 parentNode、hasChildNodes()

每个节点都有一个childNodes属性，其中保存着一个NodeList对象，是一种类数组对象，用于保存一组有序的节点。childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。父节点与其第一个和最后一个子节点之间也存在特殊关系。父节点的firstChild和lastChild属性分别指向其childNodes列表中第一个和最后一个节点。

 ParentNode.lastElementChild
 ParentNode.firstElementChild
3、操作节点

  • appendChild(): 将一个节点添加到指定父节点的子节点列表末尾, 如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。即使可以将DOM树看成是由一系列指针连接起来的，但任何DOM节点也不能同时出现在文档中的多个位置上。

//将一个节点添加到指定父节点的子节点列表末尾。const child = node.appendChild(child);// node: 是要插入子节点的父节点.// child: 即是参数又是这个方法的返回值.

  • insertBefore() 参考节点之前插入一个节点作为一个指定父节点的子节点

const insertedElement = parentElement.insertBefore(newElement, referenceElement);//1. referenceElement为null则newElement将被插入到子节点的末尾。//2. 如果newElement已经在DOM树中，newElement首先会从DOM树中移除。

insertedElement 是被插入的节点，即 newElement
parentElement  是新插入节点的父节点
newElement 是被插入的节点
referenceElement 在插入newElement之前的那个节点

  • replaceChild(): 接受的两个参数是：要插入的节点和要替换的节点

replacedNode = parentNode.replaceChild(newChild, oldChild);// newChild 用来替换 oldChild 的新节点。如果该节点已经存在于DOM树中，则它会被从原始位置删除。// oldChild  被替换掉的原始节点。// replacedNode 和 oldChild相等。

  • removeChild() 从DOM中删除一个子节点。返回删除的节点

let oldChild = node.removeChild(child);//ORelement.removeChild(child);// child 是要移除的那个子节点.// node 是child的父节点.// oldChild保存对删除的子节点的引用. oldChild === child.

  • cloneNode(): 接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false的情况下，执行浅复制，即只复制节点本身。

  • normalize()

cloneNode 和 normalize 所有类型的节点都有

二、Document 类型(document对象-文档对象)

JavaScript通过Document类型表示文档。在浏览器中，document对象继承自Document类型的一个实例，表示整个HTML页面，是window对象的一个属性

  • nodeType的值为9；

  • nodeName的值为"#document"；

  • nodeValue的值为null；

  • parentNode的值为null；

  • ownerDocument的值为null；

最常见的应用还是作为HTMLDocument实例的document对象

1、文档的子节点

DOM标准规定Document节点的子节点可以是DoumentType、Element、ProcessingInstruction或Comment，但还有两个内置的访问其子节点的快捷方式。

  • documentElement属性，该属性始终指向<html>元素。

  • childNodes列表访问文档元素，但通过documentElement属性则能更快捷、更直接地访问该元素。

// 取得对<html>的引用var html = document.documentElement;// truealert(html === document.childNodes[0]);//truealert(html === document.firstChild);//取得对<body>的引用var body = document.body;//取得对<!DOCTYPE>的引用var doctype = document.doctype;
2、文档信息

作为HTMLDocument的一个实例，document对象还有一些标准的Document对象所没有的属性。

//取得文档标题var originalTitle = document.title;//设置文档标题document.title = "New page title";//取得完整的URLvar url = document.URL;//取得域名var domain = document.domain;//取得来源页面的URLvar referrer = document.referrer;

只有domain是可以设置的。但由于安全方面的限制，也并非可以给domain设置任何值。如果URL中包含一个子域名，例如p2p.wrox.com，那么就只能将domain设置为"wrox.com"（URL中包含"www"，如www.wrox.com时，也是如此）。不能将这个属性设置为URL中不包含的域，如下面的例子所示。

//假设页面来自p2p.wrox.com域// 成功document.domain = "wrox.com";// 出错！document.domain = "nczonline.net";

当页面中包含来自其他子域的框架或内嵌框架时，能够设置document.domain就非常方便了。由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的doc-ument.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。

查找元素

  • getElementById()

  • getElementsByTagName()

  • getElementsByName() 只有HTMLDocument类型才有的方法

  • getElementsByClassName() (H5)

classList 属性
HTML5新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList属性。这个classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似，DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。

  • add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。

  • contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。

  • remove(value)：从列表中删除给定的字符串。

  • toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

特殊集合

  • document.anchors，包含文档中所有带name特性的<a>元素；

  • document.forms，包含文档中所有的<form>元素，与doc-ument.getElementsByTagName("form")得到的结果相同；

  • document.images，包含文档中所有的<img>元素，与doc-ument.getElementsByTagName ("img")得到的结果相同；

  • document.links，包含文档中所有带href特性的<a>元素。

文档写入

write()、writeln()、open()和close()。

三、Element 类型

除Document类型之外，Element类型就要算是Web编程中最常用的类型了。Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。

  • nodeType的值为1；

  • nodeName的值为元素的标签名；

  • nodeValue的值为null；

  • parentNode可能是Document或Element；

  • 其子节点可能是Element、Text、Comment、Processin-gInstruction、CDATASection或EntityReference

<div id="myDiv"></div>//可以像下面这样取得这个元素及其标签名： var div = document.getElementById("myDiv");//"DIV"alert(div.tagName);//truealert(div.tagName == div.nodeName);// 在HTML中，标签名始终都以全部大写表示
1、HTML元素

所有HTML元素都是由HTMLElement或者其更具体的子类型来表示的。

2、操作特性

  • getAttribute()

  • setAttribute()

  • removeAttribute()

3、attributes属性

attributes属性中包含一个NamedNodeMap，与NodeList类似，也是一个“动态”的集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法。

4、创建元素

document.createElement()

var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";document.body.appendChild(div);
5、元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。

四、Text 类型

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。

  • nodeType的值为3；

  • nodeName的值为"#text"；

  • nodeValue的值为节点所包含的文本；

  • parentNode是一个Element；

  • 不支持（没有）子节点。

可以通过nodeValue属性或data属性访问Text节点中包含的文本，这两个属性中包含的值相同。对nodeValue的修改也会通过data反映出来，反之亦然。使用下列方法可以操作节点中的文本。

  • appendData(text)：将text添加到节点的末尾。

  • deleteData(offset,count)：从offset指定的位置开始删除count个字符。

  • insertData(offset, text)：在offset指定的位置插入text。

  • replaceData(offset, count, text)：用text替换从offset指定的位置开始到offset+count为止处的文本。

  • splitText(offset)：从offset指定的位置将当前文本节点分成

  • substringData(offset, count)：提取从offset指定的位置开始到offset+count为止处的字符串。

  • length属性，保存着节点中字符的数目。

<!-- 没有内容，也就没有文本节点 --><div></div><!-- 有空格，因而有一个文本节点 --><div> </div><!-- 有内容，因而有一个文本节点 --><div>Hello World!</div>

通过 nodeValue 访问值

1.创建文本节点

  • document.createTextNode()

var textNode = document.createTextNode("<strong>Hello</strong> world!");var element = document.createElement("div");
element.className = "message";var textNode = document.createTextNode("Hello world!");

element.appendChild(textNode);var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode);document.body.appendChild(element);
2.规范化文本节点normalize()。
3.分割文本节点splitText()。

五、Comment类型

<div id="myDiv"><!--A comment --></div>

DOM操作技术

动态脚本

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";document.body.appendChild(script);

动态样式

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

使用NodeList

NodeList每当文档结构发生变化时，NodeList都会得到更新。

小结

DOM由各种节点构成，简要总结如下。

  • 最基本的节点类型是Node，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自Node。

  • Document类型表示整个文档，是一组分层节点的根节点。在JavaScript中，document对象是Document的一个实例。使用document对象，有很多种方式可以查询和取得节点。

  • Element节点表示文档中的所有HTML或XML元素，可以用来操作这些元素的内容和特性。

  • 另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA区域和文档片段。

DOM扩展

  • querySelector()

  • querySelectorAll()

  • matchesSelector() 这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。

H5

一、焦点管理

  • document.activeElement

  • document.hasFocus()

二、HTMLDocument 的变化

  • readyState属性

document.readyState === 'loading'document.readyState === 'complete'

  • 字符集属性

//"UTF-16"alert(document.charset);document.charset = "UTF-8";

  • 自定义数据属性
    HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。
    dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。在这个映射中，每个data-name形式的属性都会有一个对应的属性

//本例中使用的方法仅用于演示var div = document.getElementById("myDiv");//取得自定义属性的值var appId = div.dataset.appId;var myName = div.dataset.myname;//设置值

三、插入标记

  • innerHTML属性

  • outerHTML属性

  • insertAdjacentHTML()方法

四、内存与性能问题

// badfor (var i=0, len=values.length; i < len; i++){    
//要避免这种频繁操作！！   ul.innerHTML += "<li>" + values[i] + "</li>";
}// goodvar itemsHtml = ""; 
for (var i=0, len=values.length; i < len; i++){    
itemsHtml += "<li>" + values[i] + "</li>"; 
}

ul.innerHTML = itemsHtml;

五、scrollIntoView()

scrollIntoView()可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐，例如：

//让元素可见document.forms[0].scrollIntoView();

作者：EdmundChen
链接：https://www.jianshu.com/p/a6c3eea984e5


点击查看更多内容
发表于 2018.09.15 22:23， 共 3042 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
3人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

拉风的咖菲猫

手记
篇
粉丝
44
获赞与收藏
212

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消