【JavaScript】DOM编程学习总结篇

最新推荐文章于 2024-06-02 21:52:22 发布

嗨Sirius

最新推荐文章于 2024-06-02 21:52:22 发布

阅读量645

点赞数

分类专栏： # 【前端基础（HTML JS CSS）】

本文链接：https://blog.csdn.net/weixin_43698328/article/details/110572855

版权

文章目录

一、基本类型介绍
二、 DOM提供的几个属性
三、节点创建型API
四、页面修改型API
五、节点查询型API
六、节点关系型API
七、元素属性型
- 1.setAttribute
- 2.getAttribute
表格
样式操作
大小和便宜

一、基本类型介绍

1.Node类型

所有DOM节点继承该类型，Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型
这些Node类型中，我们最常用的就是element，text，attribute，comment，document，document_fragment这几种类型

2.Element类型

Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。
Element有下面几条特性：
- nodeType为1
- nodeName为元素标签名，tagName也是返回标签名
- nodeValue为null
- parentNode可能是Document或Element
- 子节点可能是 Element，Text，Comment，Processing_Instruction，CDATASection 或 EntityReference

3.Text类型

Text表示文本节点，它包含的是纯文本内容，不能包含html代码，但可以包含转义后的html代码。Text有下面的特性：
- nodeType为3
- nodeName为#text
- nodeValue为文本内容
- parentNode是一个Element
- 没有子节点

4.Attr类型

Attr类型表示元素的特性，相当于元素的attributes属性中的节点，它有下面的特性：
- nodeType值为2
- nodeName是特性的名称
- nodeValue是特性的值
- parentNode为null

5.Comment类型

Comment表示HTML文档中的注释，它有下面的几种特征：
- nodeType为8
- nodeName为#comment
- nodeValue为注释的内容
- parentNode可能是Document或Element
- 没有子节点

6.Document

Document表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性。Document有下面的特性：
- nodeType为9
- nodeName为#document
- nodeValue为 null
- parentNode为 null
- 子节点可能是一个DocumentType或Element

HTML中的节点并不只是包括元素节点，它还包括文本节点，注释节点等等。在这里我们只是简单地说明了几种常见的节点.

二、 DOM提供的几个属性

1.childNodes属性

在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子节点，它是一个包含这个元素全部子元素的数组

element.childNodes

2.nodeType属性

节点之间的关系构成了节点层次，html 页面的可以画出一个以html标签为根节点的树形结构
DOM 会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）

<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <p>hello world!!!</p>
</body>
</html>

每一个节点都有nodeType属性

node.nodeType

nodeType属性总共有12中可能取值，但其中仅有3种有实用价值
- 元素节点的nodeType属性值是1
- 属性节点的nodeType属性值是2
- 文本节点的nodeType属性值是3

description.firstChild.nodeValue = text;

3.nodeValue属性

nodeValue属性
- 如果想改变一个文本节点的值，那就使用DOM提供的nodeValue,它用来得到一个节点的值 node.nodeValue
- 需要注意：nodeValue属性获取对象的值时，得到的并不是包含在这个段落里的文本
- nodeValue属性不仅可以用来检测节点的值，还可以设置节点的值

4.firstChild和lastChild属性

数组元素childNodes[0]有个更直观的同义词。无论如何，只要访问childNodes数组的第一个元素，都可以把它写成firstChild

node.firstChild

与下面等价

node.childNodes[0]

DOM还提供了一个与之对应的lastChild属性

node.lastChild

三、节点创建型API

1.createElement

createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签

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

使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中

2.createTextNode

createTextNode用来创建一个文本节点，用法如下

var textNode = document.createTextNode("一个TextNode");

createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要appendChild将其添加到HTML文档树中

3.cloneNode

cloneNode是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素，使用如下：

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = "parent2";

这段代码通过cloneNode复制了一份parent元素，其中cloneNode的参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点

<div id="parent">
    我是父元素的文本
    <br/>
    <span>
        我是子元素
    </span>
</div>
<button id="btnCopy">复制</button>

var parent = document.getElementById("parent");
document.getElementById("btnCopy").onclick = function(){
   
	var parent2 = parent.cloneNode(true);
	parent2.id = "parent2";
	document.body.appendChild(parent2);
}

这段代码很简单，主要是绑定button事件，事件内容是复制了一个parent，修改其id，然后添加到文档中

最低0.47元/天解锁文章

嗨Sirius

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】DOM编程学习总结篇

文章目录一、基本类型介绍1.Node类型2.Element类型3.Text类型4. Attr类型5 Comment类型一、基本类型介绍1.Node类型所有DOM节点继承该类型，Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型这些Node类型中，我们最常用的就是element，text，attribute，comment，document，document_fragment这几种类型2.Element类型Element提供了对元素标签
复制链接

扫一扫

专栏目录