JavaScript DOM属性和方法之element元素对象

知数SEO

已于 2024-01-29 15:53:20 修改

阅读量540

点赞数 4

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2024-01-28 21:36:17 首次发布

本文链接：https://blog.csdn.net/weixin_42019349/article/details/135900949

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在HTML DOM中，elment对象表示HTML与纳素，可以包含的节点类型有元素u节点、文本节点、注释节点。它们有响应的属性和方法，有很多都是我们之前用过的。

一、element对象属性

1、attributes

该属性返回标签元素的所有属性集合，也就是NamedNodeMap，这个属性比较好理解，返回的是所有标签元素的属性，并不是对象的属性，而是我们写在HTML代码中的标签属性，如id、name

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
</head>
<body>
<p id="content" name="text" class="p_text">我有很多属性点击按钮查看</p>
<button onclick="getAttr()">点击查看p标签的属性</button>
</body>
<script>
    function getAttr(){
        var pObj = document.getElementById('content');
        var attr = pObj.attributes;
        console.log(attr);
    }
</script>
</html>

2、childNodes

该属性返回元素节点的所有子节点集合，包括空白文本节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content">
    <a href="https://www.zhishunet.com">知数SEO</a>
    <p>专注建站优化8年</p>
    <span>你身边的建站优化专家</span>
    <p>生意在于流量</p>
</div>
<button onclick="getChild()">点击获取div所有的子节点</button>
</body>
<script>
    function getChild(){
        var divObj = document.getElementById('content');
        var child = divObj.childNodes;
        console.log(child);
    }
</script>
</html>

3、className

这个属性可以用来设置和获取标签元素的class属性值，在开发中经常会被用到，例如：通过点击按钮来改变某个模块的整体样式，类似夜间模式的切换等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
    <style>
        .font{
            font-size: 20px;
        }
        .color{color: red}
        .new_class{
            line-height: 50px;font-weight: bold;
        }
    </style>
</head>
<body>
<p id="content" class="font color">建站优化选知数SEO</p>
<button onclick="getClass()">获取classname</button>
<button onclick="setClass()">设置classname</button>
<button onclick="addClass()">添加classname</button>
</body>
<script>
    // 获取p标签元素对象
    var pObj = document.getElementById('content');
    // 获取classname
    function getClass(){
        var classname = pObj.className;
        console.log(classname);
    }
    // 设置classname
    function setClass(){
        pObj.className = 'new_class';
        getClass(); // 显示class
    }
    // 新添加clasname
    function addClass(){
        pObj.className = pObj.className + ' ' + 'new_class';
        getClass();
    }
</script>
</html>

4、clientWidth、offsetWidth、scrollWidth等宽高属性

5、contentEditable

这个属性可以改变标签元素是否可以编辑的状态，它的值有两个：true表示可编辑，false表示不可编辑。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<p id="p1">这个p标签不可编辑，点击按钮后可编辑</p>
<p id="p2" contenteditable="true">这个p标签可编辑，点击按钮后不可编辑</p>
<button onclick="setEdit()">让p标签的文字可编辑</button>
<button onclick="setNoEdit()">让p标签的文字不可编辑</button>
</body>
<script>
    // 设置标签可编辑
    function setEdit(){
        var inputObj = document.getElementById('p1');
        inputObj.contentEditable = true;
    }
    function setNoEdit(){
        var inputObj = document.getElementById('p2');
        inputObj.contentEditable = false;
    }
</script>
</html>

6、dir

这个属性可以设置或者返回文本的方向，在一些特殊情况下会用到，在HTML标签元素中也有这个属性，它的值是rlf表示文本方向向右👉

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content" dir="rtl">一个懂建站优化的程序员，既懂建站又会优化</div>
<br>
<button onclick="getDir()">获取文本的方向</button>
<br>
<button onclick="setDir()">设置文本方向</button>
</body>
<script>
    // 获取div元素读喜庆
    var divobj = document.getElementById('content');
    // 显示文本的显示方向
    function getDir(){
        var dir = divobj.dir;
        console.log(dir);
    }
    // 设置文本的显示方向
    function setDir(){
        divobj.dir = 'ltl';
    }
</script>
</html>

7、firstChild 和 lastChild

前者用于获取元素节点的第一个子节点，后者用于获取元素节点的最后一个子节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content"><p>这是第一段文字</p><p>这是第二段文字</p><p>这是第三段文字</p></div>
<button onclick="getFirstChild()">获取第一个子节点</button>
<button onclick="getLastChild()">获取最后一个子节点</button>
</body>
<script>
    // 获取div元素读喜庆
    var divObj = document.getElementById('content');
    // 获取第一个子节点
    function getFirstChild(){
        var first = divObj.firstChild;
        console.log(first);
    }
    function getLastChild(){
        var last = divObj.lastChild;
        console.log(last);
    }
</script>
</html>

8、id

// 可以通过element.id 便捷的获取到元素的id值
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content"><p>这是第一段文字</p><p>这是第二段文字</p><p>这是第三段文字</p></div>
<button onclick="getFirstChild()">获取第一个子节点</button>
<button onclick="getLastChild()">获取最后一个子节点</button>
</body>
<script>
    // 获取div元素读喜庆
    var divObj = document.getElementById('content');
    console.log(divObj.id); // content
</script>
</html>

9、innerHTML 和 textContent

前者设置和获取标签元素的内容（包括HTML标签），后者只能设置和获取标签元素的文本的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content" class="text">
    我是文本内容
    <p>我是p标签内容</p>
</div>
<button onclick="getHtml()">获取div的内容</button>
<br>
<button onclick="setHtml()">设置div的内容</button>
<br>
<button onclick="getText()">获取div的文本内容</button>
<br>
<button onclick="setText()">设置div的文本内容</button>
</body>
<script>
    // 获取div元素读喜庆
    var divObj = document.getElementById('content');
    // 获取元素标签内容
    function getHtml(){
        var id = divObj.innerHTML;
        console.log(id);
    }
    // 设置元素u标签内容
    function setHtml(){
        divObj.innerHTML = '我是新文本<a href="#">我是链接</a>'
        getHtml();
    }
    // 获取div的文本
    function getText(){
        var text = divObj.textContent;
        console.log(text);
    }
    // 设置div文本
    function setText(){
        divObj.textContent = '<p>新文本</p>'
        getText();
    }

</script>
</html>

10、previousSibling 和 nextSibling

前者用于获取上一个兄弟节点
后者用于获取下一个兄弟节点

11、nodeName、nodeType、nodeValue

nodeName属性用于返回元素的名字
nodeType属性用于返回元素的类型
nodeValue属性用于设置和返回元素的值

11、style

这个属性可以设置和返回标签元素的style属性的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content" style="border:1px solid red">
    <p>建站优化专家-知数SEO</p>
    <p>专注搜索引擎优化8年</p>
</div>
<button onclick="getStyle()">获取div的style</button>
<button onclick="setStyle()">设置div的style</button>
</body>
<script>
    var divObj = document.getElementById('content');
    function getStyle(){
        var style = divObj.style;
        console.log(style);
    }
    function setStyle(){
        divObj.style = "background:green";
        getStyle();
    }
</script>
</html>

二、element对象方法

1、appendChild()

该方法向元素添加新的子节点，作为最后一个子节点。
我们常见的瀑布流，新生成的元素节点就是通过这个方法追加到某个元素节点中的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content">
    <p>建站优化专家-知数SEO</p>
    <p>专注搜索引擎优化8年</p>
</div>
<button onclick="addChild()">添加新的子节点</button>
</body>
<script>
    function addChild(){
        var divObj = document.getElementById('content');
        var newP = document.createElement('p');
        newP.textContent = '选择优化找知数SEO';
        divObj.appendChild(newP);
    }
</script>
</html>

2、insertBefore()

该方法在已有的子节点之前插入新的子节点，不同于appendChild()方法直接在最后添加子节点，insertBefore()方法在某个确定的子节点前面添加节点，他有两个参数：

参数1:是要添加进去的新节点
参数2:目标节点


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content"><p>建站优化专家-知数SEO</p><p>专注搜索引擎优化8年</p></div>
<button onclick="insert()">添加新的子节点</button>
</body>
<script>
    function insert(){
        var divObj = document.getElementById('content');
        var newP = document.createElement('p');
        newP.textContent = '选择优化找知数SEO';
        divObj.insertBefore(newP,divObj.firstChild);

    }
</script>
</html>

3、cloneNode()

这个方法可以对一个标签元素进行克隆，它只有一个参数：true或false

true表示连同该元素的所有内容一起克隆
false表示仅仅克隆这个标签本身

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content"><p>活到老学到老</p></div>
<button onclick="clone()">克隆p标签</button>
</body>
<script>
    function clone(){
        var divObj = document.getElementById('content');
        var pObj = divObj.firstChild;
        var newP = pObj.cloneNode(true);
        divObj.appendChild(newP);

    }
</script>
</html>

4、getAttribute() 和 setAttribute()

getAttribute()方法可以获取到某个属性的值
setAttribute()方法可以修改或设置某个属性的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content" name="知数SEO">建站优化专家</div>
<button onclick="attribute()">获取和设置div的属性</button>
</body>
<script>
    function attribute(){
        var divObj = document.getElementById('content');
        console.log(divObj.getAttribute('name')); // 知数SEO
        divObj.setAttribute('name','知数网络');  
        console.log(divObj.getAttribute('name'));  // 知数网络
        divObj.setAttribute('new','新添加属性');
        console.log(divObj.getAttribute('new'));  // 新添加属性
    }
</script>
</html>

5、getAttributeNode() 和 setAttributeNode()

这两个方法操作的属性节点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content" name="知数SEO">建站优化专家</div>
<button onclick="attribute()">获取和设置div的属性</button>
</body>
<script>
    function attribute(){
        var divObj = document.getElementById('content');
        console.log(divObj.getAttributeNode('name')); // name = '知数SEO'
        var newObj = document.createAttribute('new');
        newObj.value = '这是新属性';
        divObj.setAttributeNode(newObj);
        console.log(divObj.getAttributeNode('new'));  // new='这是新属性'
    }
</script>
</html>

6、removeAttribute() 和 removeAttributeNode()

removeAttribute()方法可以直接删除某个属性
removeAttributeNode()方法则不可以，我们要先通过getAttributeNode()方法获取到某个属性节点，才能使用这个方法删除这个得到的属性节点，而且返回这个删除的属性节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content" name="知数SEO" age="8">知数SEO</div>
<button onclick="remove()">删除属性</button>
<button onclick="removeNode()">删除属性节点</button>
</body>
<script>
    var divObj = document.getElementById('content');
    function remove(){
        divObj.removeAttribute('name');
        console.log(divObj);
    }
    function removeNode(){
        var age = divObj.getAttributeNode('age');
        var res = divObj.removeAttributeNode(age);
        console.log(res);
        console.log(divObj);
    }
</script>
</html>

7、removeChild()

这个方法经常用到，他可以删除元素节点中的某个子节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li></ul>
<button onclick="remove()">删除子节点</button>
</body>
<script>
    var ulObj = document.getElementById('content');
    function remove(){
        ulObj.removeChild(ulObj.firstChild);
    }
</script>
</html>

8、replaceChild()

这个方法可以用一个新的节点替换某一个子节点，它有两个参数：

参数1：一个新的节点
参数2: 要替换的子节点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li><li>列表3</li></ul>
<button onclick="rep()">替换子节点</button>
</body>
<script>

    function rep(){
        var ulObj = document.getElementById('content');
        var first = ulObj.childNodes[1];
        var newObj = document.createTextNode('新的文本节点');
        first.replaceChild(newObj,first.childNodes[0]);
    }
</script>
</html>

9、getElementByTagName()

这个方法可以获取某个元素下所有的指定的标签元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li><li>列表3</li></ul>
<button onclick="getTags()">获取所有li标签</button>
</body>
<script>

    function getTags(){
        var ulObj = document.getElementById('content');
        var liList = ulObj.getElementsByTagName('li');
        console.log(liList);
    }
</script>
</html>

知数SEO

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM属性和方法之element元素对象

在HTML DOM中，elment对象表示HTML与纳素，可以包含的节点类型有元素u节点、文本节点、注释节点。它们有响应的属性和方法，有很多都是我们之前用过的。
复制链接

扫一扫

专栏目录