JavaScript中的DOM对象

最新推荐文章于 2024-05-03 11:47:20 发布

吃不掉的小虾

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量2.2k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44971635/article/details/123678409

版权

文章目录

前言
一、DOM是什么？
二、获取元素节点的方法
三、操作元素的属性
四、操作元素的样式属性
五、节点操作
六、节点的属性
六、其他

前言

提示：DOM

DOM树理解。

一、DOM是什么？

示例：DOM（document object model）文档对象模型。当页面被加载的时候，浏览器会创建页面的DOM

D：文档 - DOM将HTML页面解析为一个文档 —> document对象

O：对象 - DOM将HTML页面中内容解析为对应的对象

M：模型 - DOM中对象之间的关系(节点树结构)

作用：动态操作html元素节点(写特效)和节点(element)的样式操作（增删改查）

二、获取元素节点的方法

1.获取body和head节点

代码如下（示例）：

1. document.body //返回值是节点的本身,当前某个节点对象

2. document.head //返回值是节点的本身,当前某个节点对象

2.通过ID获取元素节点

代码如下（示例）：

<body>
        <div id="box"></div>
</body>

<script>
        var div = getElementById("box");
        console.log(div);
</script>

id一旦被生成，有且只有一个，初始的第一个ID元素。

3.通过class获取元素节点

代码如下（示例）：

<body>
        <div class="box"></div>
</body>

<script>
        var div = getElementsByClassName("box");
        console.log(div);
</script>

返回的是元素数组的集合，伪数组(没有API可操作)

4.通过name属性获取元素节点

代码如下（示例）：

<body>
        <input name="st">
</body>

<script>
        var ele = getElementsByName("st");
        console.log(ele);
</script>

返回的是节点数组的集合，伪数组

5.通过标签名获取元素节点

代码如下（示例）：

<body>
        <div>22222</div>
</body>

<script>
        var ele = getElementsByTagName("div");
        console.log(ele);
</script>

返回的是元素数组的集合，伪数组(没有API可操作)

6.通过CSS选择器获取元素节点

代码如下（示例）：

<body>
        <div id="box">22222</div>
        <div class="box">3333</div>
        <div class="box">4444</div>
        <p id="box"></p>
</body>

<script>
        var ele = querySelector("#box");
        console.log(ele);

        var eles = querySelectorAll(".box");
        console.log(eles);
</script>

1. querySelector();//有且只匹配一个元素

2. querySelectorAll();//匹配所有选择器

三、操作元素的属性（html）

1、设置元素属性

例如：
<img src=" " alt=" " id="img" width="200px" height="300px">

var ele = document.getElementById("img")；

ele.属性 = "值"

或者ele.setAtrribute(属性，"值")

2、获取元素属性

ele.属性

或者ele.getAtrribute(属性)

3、删除元素属性

ele.属性 = " "

或者ele.removeAtrribute(属性)

四、操作元素的样式属性（css样式）

本质：操作style样式属性

1.设置样式

ele.style.css样式属性 = "值"

2.获取样式

ele.style.css属性

五、节点操作

1、创建元素节点：document.createElement(tagName)

2、创建文本节点：document.createTextNode="str"

3、追加子节点：parent.appendChild(ele)

4、追加子节点：parent.insertBefore(a,b)

5、删除子节点：parent.removeChild(ele)

6、删除自身节点：ele.remove( )

7、替换节点：parent.replaceChild(a,b)

8、复制节点：ele.cloneNode("true|false")

六、节点的属性

1、节点名称：ele.nodeName

2、节点的值：ele.nodeValue

3、节点的类型：ele.nodeType

4、获取元素所有的子节点：parent.children

5、获取当前元素的下一个兄弟元素：ele.nextSibling

6、获取当前元素的上一个兄弟元素：ele.previousSibling

7、获取某个元素的第一个子元素：parent.firstChild

8、获取某个元素的第一个子元素：parent.lastChild

<body>
    <div>
        <a href="#">link</a>
        <b id="b1">111111</b>
        <p>5555555555555555555555555555555555555555555555.</p>
    </div>
</body


<script>
    //节点
    var div = document.getElementByTagName("div")[0];
    console.log(div.childNodes);
    console.log(div.children);

    var b =document.getElementById("b1")
    console.log(b.parentNode);//获取父节点
    console.log(b.nextElementSibling);//兄弟节点
    console.log(b.previousElementSibling);//兄弟节点

    //新增节点
    var img =document.createElement("img");
        img.src = "src"
        div.insertBefore(img,b);
        console.log(b.NodeName);
        console.log(b.NodeType);
    //替换节点
    div.repleceChild(img,b);
    
    
</script>

七、其他

1.设置元素的内容：innerText="值" ------------------只能设置纯文本，对双标签才有用

2.设置元素的内容：innerHTML="值"--------------------不仅可以设置文本，支持html标签解析

3.元素属性添加：ele.id;ele.calssName..........

总结

DOM作用：通过js动态操作元素（动态元素的属性；动态元素的样式；节点操作（文档的标签））

吃不掉的小虾

关注

3
点赞
踩
25

收藏

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

文章目录前言一、DOM是什么？二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点三、操作元素的属性四、操作元素的样式属性五、节点操作六、节点的属性六、其他前言提示：DOMDOM树理解。一、DOM是什么？示例：DOM（document object mod...
复制链接

扫一扫