当前位置：首页 > news >正文

DOM模型

news 来源：原创 2024/5/18 22:48:54

DOM和DOM节点

1.DOM

当浏览器载入 HTML 文档, 它就会成为 Document 对象。（html页面就是一个文档，不过不是文本文本，而是超文本文档）

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。如下图它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。

2.DOM节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。
注释是注释节点。

DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。
在DOM中，节点的类型一共有7种

Document：整个文档树的顶层节点；
DocumentType：dotype标签比如：<!DOCTYPE html>
Element：网页的各种HTML标签比如：<body> <h> <a> <div>
Attribute：网页元素的属性比如：id=”id” class=”class” type=”text”
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档片段

3.节点树

一个文档的所有节点，按照所在的层次，可以抽象成一个树状结构。这种树状结构就是DOM。
最顶层的节点就是document类型的节点，它代表了整个文档。文档里面最高一层的HTML标签，一般是<html>，它构成树结构的根节点（root node），其他的Html标签都是它的下级。

除了根节点，其他节点对于周围的几点都存在3种关系

父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一父节点的节点

DOM提供操作接口，用来获取三种关系的节点。
获取子节点：firstChild（第一个子节点）lastChild（最后一个子节点）等
获取同级别：nextSibling（紧邻在后的同级节点）和previousSibling（紧邻在前的同级节点）

特征相关属性

所有的节点对象我们都可以理解为浏览器内置的node对象的实例。

1.Node.nodeName和Node.nodeType

console.log("document.nodeName=" + document.nodeName); // #document
console.log("document.nodeType=" + document.nodeType); // 9

nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

2.Node.nodeValue

返回是一个字符串，表示当前节点本身的文本值，该属性可读写。
由于只有Text节点、Comment节点和xml文档的CDATA节点有文本值，因此只有这三类节点有nodeValue，其他节点一律返回null。

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

注意，这里需要特别注意的是，Text节点代表的是元素或属性中的文本内容。

console.log("p.nodeValue=" + document.getElementById("_p").nodeValue); //null

3.Node.textContent

返回当前节点和它的后代节点的文本内容，该属性是可读写的。

console.log("p.textContent=" + document.getElementById("_p").textContent); // hello,world
document.getElementById("_p").textContent = "hello, <span color='red'>nantong!</span>";
// hello, <span color='red'>nantong!</span>

上面代码在插入文本时，会将标签解释为文本，而不会当做标签去处理。

4.Node.nextSibling

返回紧跟在当前节点后面的一个同级节点。如果没有找到返回null。

注意：该属性还包括文本节点。因此如果当前节点后面有空格，该属性返回一个文本节点，内容为空格。

var _pb = document.getElementById("_p").nextSibling;
console.log(_pb.textContent); // 空格

5.Node.previousSibling

返回当前节点前面的，距离最新的一个同级节点。

6.Node.parentNode

返回当前节点的父节点。父节点只可能包括三种类型：element节点、document节点、documentfragment节点

7.Node.parentElement

返回当前节点的父element节点。不是W3C标准，仅支持IE。

8.childNodes

返回一个nodelist集合，成员包括当前节点的所有子节点。

注意：除了Html元素节点，还包括Text节点和Comment节点。如果当前节点不包含任何子节点，则返回一个空的nodelist集合。

<div id="_asia">
<span id="_china">China</span>
<!-- xxxx -->
<span id="_korea">Korea</span>
<span id="_japan">Japan</span>
</div>
<script>
var _asia = document.getElementById("_asia");
var _asias = _asia.childNodes;
console.log(_asias);
</script>

其中：0、2、4、6、8都是同级的文本节点，内容为回车符号。

9.Node.firstChild/lastChild

返回当前节点的第一个或者最后一个子节点。如果没有找到返回null。

节点对象的方法

Node.appendChild()

接收一个对象节点作为参数，将其作为最后一个节点，插入当前节点。

appendChild 方法有个隐蔽的地方，就是调用以后 child 会从原来 DOM 中移除。

var addCountry = function() {
    var cinput = document.getElementById("country");
    var cvalue = cinput.value;
    var cli = "<li id='" + cvalue + "'>" + cvalue + "</li>";
    var culInnerHtml = document.getElementById("_asia").innerHTML;
    culInnerHtml = culInnerHtml + cli;
    document.getElementById("_asia").innerHTML = culInnerHtml;
};

var addCountry2 = function() {
    var cinput = document.getElementById("country");
    var cvalue = cinput.value;
    var cli = document.createElement("li");
    cli.innerHTML = cvalue;
    document.getElementById("_asia").appendChild(cli);
};

Node.hasChildNodes()

返回一个布尔值，判断当前节点是否有子节点。

var _asiaUl = document.getElementById("_asia");
if (_asiaUl.hasChildNodes()) {
    _asiaUl.innerHTML = "";
}

Node.insertBefore()

方法用于将某个节点插入当前节点的指定位置。接收两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点。新的节点将插在这个节点的前面。该方法返回被插入的新节点。

function appendCountry(){
    var input = document.getElementById('country');
    var inputValue = input.value;
    var cspan = document.createElement('span');
    var asia = document.getElementById('asia');
    cspan.innerHTML = inputValue;
    cspan.setAttribute('class',inputValue);
    var japan =document.getElementById('asia').childNodes[3];
    asia.insertBefore(cspan,japan);
}

Node.removeChild()

方法接收一个子节点作为参数，用于从当前节点移除该子节点。返回被移除的子节点。

var removeCountry1 = function(id) {
    var _asiaEle = document.getElementById("_asia");
    _asiaEle.removeChild(document.getElementById(id));
}

Node.replaceChild()

方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换的节点。

var repalceCountry = function() {
    var newEle = document.createElement("LI");
    newEle.innerHTML = "Tailand";
    var _asiaEle = document.getElementById("_asia");
    _asiaEle.replaceChild(newEle, document.getElementById("_japan"));
}

Element对象

1. 特征相关的属性

Element.id，Element.tagName，Element.innerHTML，Element.outerHTML（包含标签定义本身）
Element.className
Element.classList:add/remove/contains/toggle/item/toString

var asia = document.getElementById("asia");
console.log(asia.outerHTML);//包括自己本身
console.log(asia.innerHTML);
console.log(asia.tagName);
console.log(asia.className);
console.log(asia.classList);
asia.classList.add('aaa','bbb');
console.log(asia.classList.contains('bbb'));//true
console.log(asia.classList.item(3));
asia.classList.remove('bbbb');

2.盒子模型相关属性

Element.clientHeight/clientWidth
返回元素可见部分的高度和宽度：注意包含了 padding 的值
Element.clientLeft/Top
获取元素左边框、顶部边框的宽度

3.相关节点的属性

Element.children
返回当前元素节点的所有子元素。
Element.childElementCount
返回当前元素节点所有子元素的个数。

var _asia = document.getElementById("_asia");
console.log(_asia.children);
console.log(_asia.childElementCount);
console.log(_asia.children.length);

Element.firstElementChild/lastElementChild
Element.nextElementSibling/previousElementSibling

Document 对象属性和方法

HTML文档中可以使用以下属性和方法:

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.applets	返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 <applet> 元素。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.domConfig	已废弃。返回 normalizeDocument() 被调用时所使用的配置。
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

警告 !!!

在 W3C DOM核心，文档对象继承节点对象的所有属性和方法。

很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性：

属性 / 方法	避免的原因
document.attributes	文档没有该属性
document.hasAttributes()	文档没有该属性
document.nextSibling	文档没有下一节点
document.nodeName	这个通常是 #document
document.nodeType	这个通常是 9(DOCUMENT_NODE)
document.nodeValue	文档没有一个节点值
document.ownerDocument	文档没有主文档
document.ownerElement	文档没有自己的节点
document.parentNode	文档没有父节点
document.previousSibling	文档没有兄弟节点
document.textContent	文档没有文本节点