DOM对象

最新推荐文章于 2023-08-22 00:00:00 发布

mmsx2017

最新推荐文章于 2023-08-22 00:00:00 发布

阅读量285

点赞数

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/mmsx2017/article/details/80232376

版权

前端专栏收录该内容

81 篇文章 0 订阅

订阅专栏

###DOM对象简介
####一、DOM对象
DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。

在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。

DOM就是文档对象模型，文档对象模型就是DOM。

####二、DOM结构
DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容。

举例：

<html>
<head>
    <title><title>
<body>
    <h1>绿叶学习网</h1>
    <p>绿叶学习网成立于……</p>
</body>
</html>

上面这个HTML文档使用DOM树形结构解析为：

DOM树形结构

在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。

下面我们介绍几个关于节点的概念。
#####1、根节点

在HTML文档中，html就是根节点。

#####2、父节点

一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html。

#####3、子节点

一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点。

#####4、兄弟节点

如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。

###DOM对象节点属性

属性 	说明
parentNode 	获取当前节点的父节点
childNodes 	获取当前节点的子节点集合
firstChild 	获取当前节点的第一个子节点
lastChild 	获取当前节点的最后一个子节点
previousSibling 	获取当前节点的前一个兄弟节点
nextSibling 	获取当前节点的后一个兄弟节点
attributes 	元素的属性列表

####一、遍历DOM文档树
在DOM中，遍历HTML文档树，我们可以通过使用parentNode、firstChild、lastChild、previousSibling和nextSibling等属性来实现。

###DOM节点操作简介关于DOM节点常用操作如下：

（1）创建节点；
（2）插入节点；
（3）删除节点；
（4）复制节点；
（5）替换节点；

###获取DOM中指定元素在JavaScript中，可以通过以下2种方式来选中指定元素：

（1）getElementById()；
（2）getElementsByName()；

####一、getElementById()
在JavaScript中，如果想通过id来选中元素，我们可以使用document对象的getElementById()方法。

getElementById()方法类似于CSS中的id选择器。

语法：

document.getElementById("元素id");

####二、getElementsByName()
在JavaScript中，如果想通过name来选中元素，我们可以使用document对象的getElementsByName()方法。

语法：

document.getElementsByName("表单元素name值");

说明：

getElementsByName()方法都是用于获取表单元素。

与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取。

注意，是getElementsByName()而不是getElementByName()。

getElementByTagName()方法，这个方法类似于CSS中的元素选择器。但是getElementByTagName()方法有个很大缺点，它会把整个页面中相同的元素都选中。

###创建节点 ####一、JavaScript创建节点在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。

语法：

var e = document.createElement("元素名");       //创建元素节点
var t = document.createTextNode("元素内容");  //创建文本节点
e.appendChild(t);                               //把元素内容插入元素中去

###插入节点 ####一、JavaScript插入节点在JavaScript中，插入节点有2种方法：

（1）appendChild();
（2）insertBefore();

#####1、appendChild()
在JavaScript中，我们可以使用appendChild()方法把新的节点插入到当前节点的“内部”。

语法：

obj.appendChild(new)

说明：

obj表示当前节点，new表示新节点。

举例：

function insert() {
            var e = document.createElement("li");
            var str = document.getElementById("txt").value; //获取文本框的值
            var txt = document.createTextNode(str);
            e.appendChild(txt);
            var list = document.getElementById("list");
            list.appendChild(e);

#####2、insertBefore
在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。

语法：

obj.insertBefore(new,ref)

说明：

obj表示父节点；

new表示新的子节点；

ref指定一个节点，在这个节点前插入新的节点。

mmsx2017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM对象

DOM对象简介一、DOM对象DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。DOM就是文档对象模型，文档对...
复制链接

扫一扫