JavaScript基础笔记（七）DOM

时间：2023-03-09 20:16:57
JavaScript基础笔记（七）DOM

DOM

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

一、节点层次

一）Node类型

DOM1定义了一个Node接口，该接口将由DOM中所有节点类型实现。

每一个节点都有一个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_FRAGMENT_NODE(11)；
 Node.NOTATION_NODE(12)。

<body>

    <input id="king" value="for the king!"/>

</body>

<script>

    window.onload = function () {

        var h = document.getElementById("king");

        //方法一，在IE浏览器中不管用

        if (h.nodeType == Node.ELEMENT_NODE) {

            console.log("This is a element.");

        }

        //方法二，适用于所有浏览器

        if (h.nodeType == 1) {

            console.log("It's a element");

            console.log("The node name is "+h.nodeName);   //"INPUT"即为元素的标签名

            console.log("The node value is "+h.nodeValue); //对于元素节点始终是null

        }

    }

</script>

1.节点关系

每一个节点都有一个childNodes属性，其中保存着一个NodeList类数组对象（注意该对象是动态的随着DOM变化而变化），

<body>

    <div id="father">

        <p>This is a p</p>

        <h5>A HTML5?</h5><br>

        <input value="just a input">

    </div>

</body>

<script>

    var d = document.getElementById("father");

    if (d.nodeType == 1) {

        console.log("The length of the children is "+ d.childNodes.length);  //

        console.log("The first children is "+ d.childNodes[0].nodeName); //"#text"

        console.log("The second children node is "+ d.childNodes[1].nodeName); //"p"

    }

</script>

parentNode属性：指向父节点

previousSilbling属性；前一个同胞节点

nextSilbling属性：后一个同胞节点

ownerDocument属性：指向表示整个文档的文档节点。

2.操作节点

1.appendChild():向childNodes列表末尾添加一个节点，返回添加的节点，如果该节点在文档中存在，移动之。

2.insertBefore(newNode,oldNode):把节点放在childNodes列表指定位置,如果参照节点为null，则添加到末尾。

3.replaceChild(new,old)：替换childNodes列表中的节点。

4.removeChild():

5.cloneNode(boolean):true为深复制，连同子节点一起复制，false为浅复制只复制该节点。注意该方法不会复制

添加到DOM节点中的JS属性，如事件处理程序等。

<body>

    <h2 id="bother">Apple Orange</h2>

    <div id="father">

        <p>This is a p</p>

        <h5>A HTML5?</h5><br>

        <input value="just a input">

    </div>

</body>

<script>

    var h = document.getElementById("bother");

    var d = document.getElementById("father");

    var h2 = h.cloneNode(true);

    d.appendChild(h2);

    console.log(d.lastChild.nodeName); //H2

</script>

二）Document类型

在浏览器中，document对象是HTMLDocument对象（继承自Document对象）的一个实例，表示整个HTML页面，并且document对象是window对象的一个属性。

1.文档的子节点

1）document.documentElement:该属性指向<html>元素

2）document.body:指向<body>元素

3）document.doctype:浏览器差别很大，不常用。

2.文档信息

1）document.title:指向<title>元素的文本，可修改

2）document.URL：完整的URL信息

3）document.domain:只包含页面的域名，可设置

4）document.reference:包含来源页面的URL

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

浏览器对 domain 属性还有一个限制，即如果域名一开始是“松散的”（loose），那么不能将它再设
置为“紧绷的”（tight）。换句话说，在将 document.domain 设置为"wrox.com"之后，就不能再将其
设置回"p2p.wrox.com"，否则将会导致错误

3.查找元素

1）document.getElementById(id):如果多个id相同，只返回第一个

2）document.getElementsByTagName(name)：为了兼容，标签名不区分大小写，在HTML文档中返回一个HTMLCollection对象，

该对象有一个nameItem(name)方法，使用这个方法可以通过元素的name属性获得元素。注意，元素也有该方法，即element.getElementsByTagName()

3）document.getElementsByName(name):HTMLDocument才有的方法。

4.文档的写入

1）document.write(str):页面被加载的过程中动态地写入内容

2）document.writeln(str):与1）不同的是末尾加上了换行符

使用上面两个方法可以动态地包含文件资源。

如果在文档加载完成后调用上述两个方法，页面将会被重写：

<body>

    <p>Things you never see!</p>

    <script>

        //由于用了window.onload延迟执行函数，<p>元素中的文本会被重写。

        window.onload = function () {

            document.write("<h2>Now the time is " + new Date().toLocaleDateString()+ "</h2>");

        }

    </script>

</body>

三）Element类型

Element用以表现HTML或XML中的元素。

要访问标签名，可以使用nodeName或者tagName。

var div = document.getElementById("myDiv");

alert(div.tagName); //"DIV"

alert(div.tagName == div.nodeName); //true
if (element.tagName.toLowerCase() == "div"){ //这样最好（适用于任何文档）

//在此执行某些操作

}

1.HTML元素

所有的HTML元素都由HTMLElement类型及其子类表示，该类型继承自Element类型，并添加了如下属性：

 id，元素在文档中的唯一标识符。
 title，有关元素的附加说明信息，一般通过工具提示条显示出来。
 lang，元素内容的语言代码，很少使用。
 dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），
也很少使用。
 className，与元素的 class 特性对应，即为元素指定的 CSS 类。没有将这个属性命名为 class，
是因为 class 是 ECMAScript 的保留字

var div = document.getElementById("myDiv");

alert(div.id); //"myDiv""

alert(div.className); //"bd"

alert(div.title); //"Body text"

alert(div.lang); //"en"

alert(div.dir); //"ltr"
div.id = "someOtherId";

div.className = "ft";

div.title = "Some other text";

div.lang = "fr";

div.dir ="rtl";

4.特性

1）element.getAttribute(attrName):取得元素属性，包括自定义属性。

注意任何元素的所有非自定义属性，都可以通过element.atrribute这中形式来访问。

但style属性通过getAttribute()返回的是CSS文本，通过element.style则返回一个对象。

对于事件处理程序，如onclick特性通过getAttribute()返回的是字符串文本，element.onclick返回的是一个函数。

2）element.setAttribute(name,value):设置元素属性，该属性名会被转换为小写形式。

3）element.removeAttribute(name):移除属性。

5.创建元素

document.createElement(tagName):标签名不区分大小写。

四）Text类型

文本节点由Text类型表示，可以通过nodeValue或者data属性访问Text类型中的值，length属性保存字符串长度。

 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 为止
处的字符串

<!-- 没有内容，也就没有文本节点 -->

<div></div>

<!-- 有空格，因而有一个文本节点 -->

<div> </div>

<!-- 有内容，因而有一个文本节点 -->

<div>Hello World!</div>

1.创建文本节点

document.createTextNode(content):创建一个文本节点

<body>

    <script>

        var d = document.createElement("div");

        var t = document.createTextNode("Hello world");

        d.appendChild(t);

        document.body.appendChild(d);

    </script>

</body>

2.合并文本节点

如果我们在一个元素上使用多次appendChild()方法追加文本节点，就有可能存在多个文本节点。

此时，我们可以使用Node类型的normalize()方法合并文本节点。element.normalize()

3.分割文本节点

Text类型的spliteText(offset)方法可以分割文本节点

五）Comment类型

注释在DOM中是通过Comment类型表示的，该类型与Text类型继承自相同的基类，

因此它有除了spliteText()方法外所有的字符串操作方法。也可以通过data和nodeValue访问值。

document.createComment(content)创建注释节点

六）Attr类型

元素的特性在DOM中庸Attr类型表示。注意：尽管特性是节点，但它们并不被认为是DOM文档树的一部分。

document.createAttribute(name)

相关文章