JavaScript Element对象

最新推荐文章于 2024-04-18 17:50:16 发布

VIP文章 blankです

最新推荐文章于 2024-04-18 17:50:16 发布

阅读量1.8k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_47782618/article/details/124369670

版权

1. 什么是Element对象

Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。

2. Element对象的属性

2.1 Element.id

Element.id属性返回指定元素的id属性，该属性可读写。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div id="box">文本1</div>
    <div>文本2</div>
    <div>文本3</div>
    <script>
        var myid = document.getElementById("box");
        /* document.getElementById()方法获得一个Element节点对象 */
        console.log(myid.id);
        /* 获得该Element对象的id属性 */
        myid.id = "newBox";
        /* 修改该Element对象的id属性 */
        console.log(myid.id);
    </script>
</body>
</html>

2.2 Element.tagName

Element.tagName属性返回指定元素的大写标签名。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div id="box">文本1</div>
    <div>文本2</div>
    <div>文本3</div>
    <script>
        var myTagName = document.getElementById("box");
        console.log(myTagName.tagName); /*DIV*/
    </script>
</body>
</html>

2.3 Element.className

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="box1 box2" id="box">文本1</div>
    <div>文本2</div>
    <div>文本3</div>
    <script>
        var myClassName = document.getElementById("box");
        console.log(myClassName.className); 
        /* box1 box2 */
    </script>
</body>
</html>

2.4 Element.classList

classList属性返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="box1 box2" id="box">文本1</div>
    <div>文本2</div>
    <div>文本3</div>
    <script>
        var myClassList = document.getElementById("box");
        console.log(myClassLi

最低0.47元/天解锁文章

blankです

关注

0
点赞
踩
2

收藏

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

1. 什么是Element对象Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。2. Element对象的属性2.1 Element.idElement.id属性返回指定元素的id属性，该属性可读写。<!DOCTYPE html><html lang="en"><head></head><body> <div id
复制链接

扫一扫