DOM

最新推荐文章于 2022-10-03 10:13:53 发布

mmsx2017

最新推荐文章于 2022-10-03 10:13:53 发布

阅读量412

点赞数

分类专栏：前端 # JS

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

版权

前端同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

22 篇文章 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指定一个节点，在这个节点前插入新的节点。

举例：

 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.insertBefore(e,list.firstChild);
        }

删除节点

一、JavaScript删除节点

在JavaScript中，我们可以使用removeChild()方法来删除当前节点下的某个子节点。

语法：

obj.removeChild(oldChild);

说明：

参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点。

举例：

function del() {
            var e = document.getElementById("list");
            //判断元素节点e是否有子节点
            if (e.hasChildNodes) {//获取元素节点额的最后一个子节点
                e.removeChild(e.lastChild);    //删除e元素的最后一个子节点
            }
        }

当我们点击“删除”按钮时，整个列表都被删除了。在使用removeChild()方法删除元素之前我们必须找到2点：

（1）被删除的子节点；
（2）被删除子节点的父节点；

复制节点

一、JavaScript复制节点

在JavaScript中，我们可以使用cloneNode()方法来实现复制节点。

语法：

obj.cloneNode(bool)

说明：
参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：

（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；

（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；

举例：

function add() {
        var e = document.getElementById("list");
        document.body.appendChild(e.cloneNode(1));
    }

替换节点

一、JavaScript替换节点

在JavaScript中，我们可以使用replaceChild()方法来实现替换节点。

语法：

obj.replaceChild(new,old)

说明：

obj，表示被替换节点的父节点；

new，表示替换后的新节点；

old，需要被替换的旧节点。

举例：

 function replace() {
        //获取两个文本框的值
        var tag = document.getElementById("tag").value;
        var txt = document.getElementById("txt").value;
        //获取p元素
        var lvye = document.getElementById("lvye");
        //根据两个文本框的值创建新节点
        var e = document.createElement(tag);
        var t = document.createTextNode(txt);
        e.appendChild(t);
        document.body.replaceChild(e,lvye);
    }

注意：
也就是说，想要实现替换节点，就必须找到3点：

（1）新节点；

（2）被替换的子节点；

（3）被替换子节点的父节点；

innerHTML和innerText

一、innerHTML和innerText简介

我们可以使用apendChild()方法在一个元素节点内部插入一个节点，但是这种方法使用麻烦，并且只能一个个把子节点插进去。

在JavaScript中，我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。

innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。

innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。设置该属性可以用于为指定的HTML文本替换元素的内容。

innerText属性与inerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容。即使指定的是HTML文本，它也会认为是普通文本而原样输出。

 <div id="lvye"><strong>绿叶学习网</strong></div>
    innerHTML内容是：<input id="txt1" type="text"><br/>
    innerText内容是：<input id="txt2" type="text">

    <script type="text/javascript">
        var e = document.getElementById("lvye");
        document.getElementById("txt1").value = e.innerHTML;
        document.getElementById("txt2").value = e.innerText;

举例：

<div id="lvye"></div>
<script type="text/javascript">
    var e = document.getElementById("lvye");
    e.innerHTML="<span style='color:red;font-weight:bold;'>绿叶学习网</span><span style='color:blue;font-weight:bold;'>JavaScript入门教程</span>";
</script>

innerHTML和innerText属性返回值的区别

HTML代码  innerHTML返回值    innerText返回值
<div>绿叶学习网</div>    "绿叶学习网"     "绿叶学习网"
<div><b>绿叶学习网</b></div>     "<b>绿叶学习网</b>"  "绿叶学习网"

JavaScript操作CSS样式

一、JavaScript操作CSS简介

在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。

语法：

obj.style.属性名;

说明：

obj指的是DOM对象，也就是通过document.getElementById()等获取而来的DOM元素节点对象。

属性名为CSS属性名。有一点大家要非常清楚，就是这里的属性名使用的“骆驼峰”型的CSS属性名。举个例子，“font-size”应该写成“fontSize”，“border-bottom-width”应该写成“borderBottomWidth”，以此类推。

举例：
function change() {
var e = document.getElementById(“lvye”);
e.style.color = “red”;
e.style.border = “1px solid gray”;
}

mmsx2017

关注

0
点赞
踩
2

收藏

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

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

扫一扫

专栏目录