一文读懂JavaScript DOM节点操作（JavaScript DOM节点操作详解）

一、什么是节点

DOM模型是树状结构模型，二组成这棵树的就是一个个点，在网络术语中称之为节点。
节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的，DOM节点也有其不同的类型。

二、节点类型

DOM节点分为5种类型：

文档节点（就是整个HTML文档，也就是document对象）
元素节点
注释节点（在HTML文档中写的注释）
属性节点
文本节点

1、元素节点

我们看到的一个个标签元素在DOM节点树中就是元素节点，它是我们操作节点的核心，即使我们要操作属性节点和文本节点，也要先找到它们的元素节点

DOM中element对象的三个属性：

nodeType属性可以显示节点的类型 1表示元素节点 2表示属性节点 3表示文本节点
nodeName属性可以显示节点的名字，显示的名字是大写形式
nodevalue属性可以显示节点的值，元素节点没有值，显示null

2、属性节点

// 每个标签元素都有自己的一些属性，这些属性就是属性节点。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<h2>让推广显而易见</h2>
<p id="node">没有推广不了的产品</p>
<ul>
    <li>知数网络</li>
    <li>知数SEO</li>
</ul>
</body>
<script>
    var pObj = document.getElementById('node');  // 获取p元素节点
    var p_id = pObj.getAttributeNode('id'); // 获取id属性节点
    console.log(p_id); // 打印p的id属性  node
    var p_id_type = p_id.nodeType; // p元素的节点类型
    console.log(p_id_type); // 打印节点类型 2
    var p_id_name = p_id.name; // p元素节点的名字
    console.log(p_id_name); // id
    var p_id_value = p_id.value; // p元素节点的值
    console.log(p_id_value); // node

</script>
</html>
// 代码中我们使用getAttributeNode()方法获取属性节点，它和getAttribute()方法的区别在于后者得到的属性值而不是对象

3、文本节点

// 我们写在标签中的文本内容就是文本节点，在浏览器中呈现给用户的内容就是一个文本节点。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<h2>让推广显而易见</h2>
<p id="node">没有推广不了的产品</p>
<ul>
    <li>知数网络</li>
    <li>知数SEO</li>
</ul>
</body>
<script>
    var pObj = document.getElementById('node'); // 获取p元素节点
    var p_text = pObj.firstChild;
    console.log(p_text);
    var p_text_type = p_text.nodeType;
    console.log(p_text_type); // 3
    var p_text_name = p_text.nodeName;
    console.log(p_text_name); // #text
    var p_text_value = p_text.nodeValue;
    console.log(p_text_value);  // 没有推广不了的产品

</script>
</html>

4、节点类型、节点名字、节点值

4.1、节点类型

可以通过nodeObject.nodeType属性获取

节点类型	节点说明
元素节点	每个HTML标签就是元素
属性节点	元素节点的属性，如id class name src等
文本节点	元素节点或属性节点的文本内容，如标签内容是文本节点
注释节点	文档的注释
文档节点	整个html文档，DOM树中的根标签

4.2、节点名字

不同DOM节点有不同的名称， 可以通过nodeObject.nodeName 属性得到节点的名称

节点类型	节点名字
元素节点	HTML标签的名称，大写如元素节点是P
属性节点	属性的名称
文本节点	永远是text
注释节点	永远是#comment
文档节点	永远是#document

4.3、节点值

节点的值可以通过nodeObject.nodeValue属性获取

节点类型	节点的值
元素节点	没有值
属性节点	属性的值就是属性节点的值
文本节点	文本内容就是文本节点的值
注释节点	注释内容就是注释节点的值
文档节点	没有值

三、通过文档对象方法获取节点

我们相操作某个节点，第一步就是获得这个节点。

1、通过id属性获取节点

通过document读喜庆提供的 getElementById() 方法，接收一个标签元素的id属性值，就可以获取到对应id的标签元素

2、通过标签名字获取节点

getElementsByTagName()方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<h2>让推广显而易见</h2>
<p id="node">没有推广不了的产品</p>
<ul>
    <li>知数网络</li>
    <li>知数SEO</li>
</ul>
</body>
<script>
    var lis = document.getElementsByTagName('li'); // 获取所有li标签元素
    console.log(lis); // 打印li元素集合
    console.log(lis[0]); // 打印第一个li元素

</script>
</html>
// getElementsBytagName()不仅是document对象的方法，也是element对象的方法

3、通过类名获取节点

getElementsByClassName()方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div>春雨惊春清谷天，</div>
<div class="bgcolor">夏满芒夏暑相连。</div>
<div>秋处露秋寒霜降，</div>
<div class="bgcolor">冬雪雪冬小大寒。</div>
</body>
<script>
    var bgcolors = document.getElementsByClassName('bgcolor');
    console.log(bgcolors);
    console.log(bgcolors[0]);
</script>
</html>

4、通过name属性获取节点

还可以通过表单中的name属性值来获取到指定的input标签元素
getElementsByName()方法接受一个name值就可以获取到对应的input标签元素,它返回一个数组，这个数组存放着所有name值等于我们传到函数中的那个值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form id="myForm" action="">
    <input type="text" name="username"><br>
    <input type="radio" name="sex" value="男">男<br>
    <input type="radio" name="sex" value="女">女<br>

</form>
</body>
<script>
    var sex = document.getElementsByName('sex');
    console.log(sex);
    console.log(sex[0]);
</script>
</html>

四、通过层级关系获取节点

HTML文档在浏览器中被解析成DOM树状结构模型，而且这种树状结构模型非常方便我们寻找该节点相关的一些关系，我们可以通过层级关系来找到对应的节点。

1、子节点childNodes

// 一个节点可以有一个或多个子节点，通过DOM提供的方法，我们可以操作这个节点的所有子节点
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content">
    <p>知数</p>
    <span>专注搜索引擎优化和品牌推广</span>
    <p>一个懂技术的seoer</p>
    <a href="https://www.zhishunet.com">知数SEO</a>
</div>
</body>
<script>
    // 获取div标签元素节点对象
    var divobj = document.getElementById('content');
    // 获取该div下的所有子节点
    var childs = divobj.childNodes;
    // 打印获得的所有子节点
    console.log(childs);
    // 打印获得的所有子节点的个数
    console.log(childs.length);
</script>
</html>

// firstChild属性可以获得第一个子节点
// lastChild属性可以获得最后一个子节点

2、父节点parentNode

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content">
    <p>知数</p>
    <span>专注搜索引擎优化和品牌推广</span>
    <p id="p_node">一个懂技术的seoer</p>
    <a href="https://www.zhishunet.com">知数SEO</a>
</div>
</body>
<script>
    // 获取标签元素节点对象
    var p_obj = document.getElementById('p_node');
    // 获取p元素的父节点
    var parent = p_obj.parentNode;
    console.log(parent);
</script>
</html>

3、兄弟节点

// 所谓的兄弟节点就是同级节点 
// nextSibling属性可以获取某个节点的下一个节点
// previousSibling属性可以获取某个节点的上一个节点
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content">
    <p>知数</p>
    <span>专注搜索引擎优化和品牌推广</span>
    <p id="p_node">一个懂技术的seoer</p>
    <a href="https://www.zhishunet.com">知数SEO</a>
</div>
</body>
<script>
    // 获取标签元素节点对象
    var p_obj = document.getElementById('p_node');
    // 获取p元素的下一个节点
    var nextNode = p_obj.nextSibling;
    console.log(nextNode);
</script>
</html>

五、节点的其他操作

1、添加节点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
    // 创建一个a元素节点
    var a = document.createElement('a');
    // 设置a元素节点的属性节点
    a.setAttribute('href','https://www.zhishunet.com');
    // 创建新的文本节点
    var text = document.createTextNode('知数SEO');
    // 将文本节点插入到新创建的a元素节点中
    a.appendChild(text);
    // 找到要插入新节点到某个父节点下
    var parent = document.getElementById('content');
    // 向这个父节点尾部插入新创建的节点
    parent.appendChild(a);
</script>
</html>

// 还可以使用createTextNode()方法来创建文本节点 还可以使用textContent属性来设置元素节点的文本内容
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
    // 创建一个a元素节点
    var a = document.createElement('a');
    // 设置a元素节点的属性节点
    a.setAttribute('href','https://www.zhishunet.com');
    // 设置或修改a元素节点的文本内容
    a.textContent = '知数';
    // 找到要插入新节点到某个父节点下
    var parent = document.getElementById('content');
    // 向这个父节点尾部插入新创建的节点
    parent.appendChild(a);
</script>
</html>

// 还可以使用innerHTML属性来设置或获取元素节点的所有内容
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
    // 找到要插入的父节点
    var parent = document.getElementById('content');
    // 向这个目标节点插入需要的内容
    parent.innerHTML = '<a href="https://www.zhishunet.com">知数SEO</a>';
</script>
</html>

2、删除节点

// 删除节点和替换节点有些相似，必须先找到父节点，才能删除这个父节点下的某个子节点
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div>
    <p id="p_node">这个需要删除</p>
    <p>宝剑锋从磨砺出</p>
    <p>梅花香自苦寒来</p>
</div>
</body>
<script>
    // 找到要删除的节点
    var delNode = document.getElementById('p_node');
    // 得到要删除的节点的父节点
    var parent = delNode.parentNode;
    // 通过父节点的removeChiled()方法删除目标节点
    parent.removeChild(delNode);
</script>
</html>

3、修改节点

// 我们可以使用elment对象的replaceChild()方法来替换子节点
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="div_node">
    <p>这个需要替换的</p>
    <p>宝剑锋从磨砺出</p>
    <p>梅花香自苦寒来</p>
</div>
</body>
<script>
    // 创建一个a元素
    var a = document.createElement('a');
    // 设置a元素的属性节点
    a.setAttribute('href','https://www.zhishunet.com')
    // 创建新的文本节点
    var text = document.createTextNode('知数SEO')
    // 将文本节点插入到新创建的a元素节点中
    a.appendChild(text);
    // 找到目标父节点div元素节点
    var parent = document.getElementById('div_node');
    // 找到第一个p元素节点
    var oldNode = parent.childNodes[1];
    // 替换内容
    parent.replaceChild(a,oldNode);
</script>
</html>

六、自封装函数库

原始的DOM操作需要很多代码才能得到我们想要的效果，还有就是浏览器的兼容问题。所以我们要写很多代码来解决这些问题，如果每次操作DOM都要写很多重复的代码，就不符合开发的思想（不要重复造轮子）。

<script>
// 自定义DOM函数库
function MyDom(obj){
	this.obj = obj; // 设置对象为传递过来的节点对象
	this.getChildList = function(){};  // 获取所有子元素节点的方法
	this.getFirstChild = function(){};  // 获取第一个子元素节点的方法
	this.getLastChild = function(){};  // 获取最后一个子元素节点的方法
	this.getNextNode = function(){};  // 获取下一个元素节点的方法
	this.getPreNode = function(){};  // 获取上一个元素节点的方法
	this.appendChild = function(){}; // 添加子节点的方法
	this.removeChild = function(){};  // 删除元素节点的方法
	this.bind = function(){};  // 绑定事件的方法
	this.html = function(){};  // 获取或者设置元素节点内容的方法
}
</script>

// 也可以先创建一个空对象，然后通过修改她的prototype属性来设置对象的属性和方法
<script>
// 自定义DOM函数库
function MyDom(obj){
	this.obj = obj;
};

MyDom.prototype = {
	this.obj = obj; // 设置对象为传递过来的节点对象
	this.getChildList = function(){};  // 获取所有子元素节点的方法
	this.getFirstChild = function(){};  // 获取第一个子元素节点的方法
	this.getLastChild = function(){};  // 获取最后一个子元素节点的方法
	this.getNextNode = function(){};  // 获取下一个元素节点的方法
	this.getPreNode = function(){};  // 获取上一个元素节点的方法
	this.appendChild = function(){}; // 添加子节点的方法
	this.removeChild = function(){};  // 删除元素节点的方法
	this.bind = function(){};  // 绑定事件的方法
	this.html = function(){};  // 获取或者设置元素节点内容的方法
}
</script>

posted @ 2024-01-22 18:37 知数网络阅读(210) 评论(0) 编辑收藏举报

刷新页面返回顶部

知数网络