DOM常用操作

最新推荐文章于 2023-08-13 13:02:41 发布

Frank831143

最新推荐文章于 2023-08-13 13:02:41 发布

阅读量110

点赞数 1

文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_43489683/article/details/120784440

版权

DOM常用操作

在这里插入图片描述
文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。

一、DOM树

DOM树有两种，分别为节点树和元素树。

节点树：把文档中所有的内容都看成树上的节点；
元素树：仅把文档中的所有标签看成树上的节点。

二、DOM常用操作

2.1 查找节点


document.getElementById(‘id属性值’);	返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName(‘class属性值’);	返回拥有指定class的对象集合
document/element.getElementsByTagName(‘标签名’);	返回拥有指定标签名的对象集合
document.getElementsByName(‘name属性值’);	返回拥有指定名称的对象结合
document/element.querySelector(‘CSS选择器’);	仅返回第一个匹配的元素
document/element.querySelectorAll(‘CSS选择器’);	返回所有匹配的元素
document.documentElement	获取页面中的HTML标签
document.body	获取页面中的BODY标签
document.all[’’]	获取页面中的所有元素节点的对象集合型

2.2 新建节点


document.createElement(‘元素名’);	创建新的元素节点
document.createAttribute(‘属性名’);	创建新的属性节点
document/element.getElementsByTagName(‘标签名’);	创建新的文本节点
document.createComment(‘注释节点’);	创建新的注释节点
document.createDocumentFragment( );	创建文档片段节点

2.3 添加新节点


parent.appendChild( element/txt/comment/fragment );	向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );	向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );	给元素增加属性节点
element.setAttribute( attributeName, attributeValue );	给元素增加指定属性，并设定属性值

添加文本节点，有两种常见方法

document.createTextNode(‘新增文本内容’);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h2>创建文本节点</h2>
<button onclick="addText()">创建文本节点</button>
<p></p>
    <script>
        function addText(){
            var element = document.getElementsByTagName('p')[0];
            var txt = document.createTextNode('新增文本内容'); //创建文本节点
            element.appendChild(txt); //添加文本节点
        }
    </script>
</body>
</html>

element.innerHTML=‘新增文本内容’; 【推荐】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h2>创建文本节点</h2>
<button onclick="addText()">创建文本节点</button>
<p></p>
    <script>
        function addText(){
            var element = document.getElementsByTagName('p')[0];
            element.innerHTML='新增文本内容'; //插入文本内容
        }
    </script>
</body>
</html>

2.4 删除节点


parentNode.removeChild( existingChild );	删除已有的子节点，返回值为删除节点
element.removeAttribute(‘属性名’);	删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );	删除指定属性，返回值为删除的属性

2.5 修改节点


parentNode.replaceChild( newChild, existingChild );	用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName );	若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue );	若原元素已有该节点，此操作能达到修改该属性值的目的

添加属性节点，修改属性值：

element.setAttributeNode( attributeName );

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>属性节点</h2>
    <p class="classValue">增添id属性，并修改class属性值</p>
    <script>
        var element = document.getElementsByTagName('p')[0];
        element.setAttribute('id','idValue'); //添加属性节点
        element.setAttribute('class','classNewValue');//修改属性值
    </script>
</body>
</html>

element.setAttribute( attributeName, attributeValue );

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>属性节点</h2>
    <p class="classValue">增添id属性，并修改class属性值</p>
    <script>
        var element = document.getElementsByTagName('p')[0];
// 添加属性节点
        var attr = document.createAttribute('id');
        attr.value = 'idValue';
        element.setAttributeNode(attr);

// 修改属性值
        var attr = document.createAttribute('class');
        attr.value = 'classNewValue';
        element.setAttributeNode(attr);

    </script>
</body>
</html>

Frank831143

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM常用操作

DOM常用操作文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。一、DOM树DOM树有两种，分别为节点树和元素树。节点树：把文档中所有的内容都看成树上的节点；元素树：仅把文档中的所有标签看成树上的节点。二、DOM常用操作2.1 查找节点document.getElementById(‘id属性值’);返回
复制链接

扫一扫