javascript的操作DOM的节点操作

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：1. nodeName : 节点的名称2. nodeValue ：节点的值3. nodeType ：节点的类型一、nodeName 属性:节点的名称，是只读的。1.元素节点的 nodeName 与标签名相同2.属性节点的 nodeName 是属性的名称3.文本节点的 nodeName 永远是 #text4.文档节

qq_53587164

1634人浏览 · 2022-04-28 20:13:41

qq_53587164 · 2022-04-28 20:13:41 发布

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

获取父节点: Node.prototype.parentNode

获取父节点元素: Node.prototype.parentElement

<!DOCTYPE html><html lang="en"><head>

<title>Document</title></head><body>

var id1 = document.getElementById("id1");

document.getElementById("id1").parentNode;

document.getElementById("id1").parentNode.parentNode;

document.getElementById("id1").parentNode.parentNode.parentNode;

document.getElementById("id1").parentNode.parentNode.parentNode.parentNode;

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

<!DOCTYPE html><html lang="en"><head>

<title>Document</title></head><body>

var id1 = document.getElementById("id1");

document.getElementById("id1").parentElement;

document.getElementById("id1").parentElement.parentElement;

document.getElementById("id1").parentElement.parentElement.parentElement;

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

父节点有三种类型: 元素节点（element）、文档节点（document）和文档片段节点(documentfragment), .parentNode 可能返回这三个类型中的一个.

父元素节点排除了document 和 documentfragment, 只会返回元素节点.

注意, 如果对element和documentfragment使用, 则返回null

<span>这是div中的第一个span标签</span><p>这是div中的第二个元素,第一个p标签</p><ul id="uu"...>

< /div>

var ulobj=my$("uu");//uL标签的父级节点

console.log(uLobj.parentNode);//ul标签的父级元素

console.log(ulobj.parentElement);

获取相关的节点

<!DOCTYPE html>

<head>

<title>title</title>

<style>

#dv {

width:500px;

height:500px;

background-color:red;

}

</style>

</head>

<body>

<div id="dv">哦哦

<span>这是div中的第一个span标签</span>

<p>这是div中的第二个元素,第一个p标签</p>

</ul>

</div>

//div

// var dvObj=document.getElementById("dv");

// //获取里面的每个子节点

// for(var i=0;i<dvObj.childNodes.length;i++){

// var node=dvObj.childNodes[i];

// //nodeType--->节点的类型:1---标签,2---属性,3---文本

// //nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本

// //nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容

// console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);

// }

//div

var dvObj=document.getElementById("dv");

//获取的是属性的节点

var node=dvObj.getAttributeNode("id");

dvObj.onclick=function(){

console.log(node.nodeType+"----"+node.nodeName+"===="+node.nodeValue);

}

//div

// var dvObj=document.getElementById("dv");

// //子节点

// console.log(dvObj.childNodes);//7个子节点

// //子元素

// console.log(dvObj.children);

</script>

</body>

</html>

获取节点2

<!DOCTYPE html>

<head>

<title>title</title>

</head>

<body>

<div id="dv">哦哦

<span>这是div中的第一个span标签</span>

<p>这是div中的第二个元素,第一个p标签</p>

</ul>

</div>

//12行代码:都是获取节点和元素的

//ul

var ulObj=document.getElementById("uu");

//父级节点

console.log(ulObj.parentNode);

//父级元素

console.log(ulObj.parentElement);

//子节点

console.log(ulObj.childNodes);

//子元素

console.log(ulObj.children);

console.log("==============================================");

//第一个子节点

console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素

//第一个子元素

console.log(ulObj.firstElementChild);//-----------------IE8中不支持

//最后一个子节点

console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素

//最后一个子元素

console.log(ulObj.lastElementChild);//-----------------IE8中不支持

//某个元素的前一个兄弟节点

console.log(my$("three").previousSibling);

//某个元素的前一个兄弟元素

console.log(my$("three").previousElementSibling);

//某个元素的后一个兄弟节点

console.log(my$("three").nextSibling);

//某个元素的后一个兄弟元素

console.log(my$("three").nextElementSibling);

//总结:凡是获取节点的代码在谷歌和火狐得到的都是相关的节点

//凡是获取元素的代码在谷歌和火狐得到的都是相关的元素

//从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持

// var ulObj=document.getElementById("uu");

// console.log("==============================================");

// //第一个子节点

// console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素

// //第一个子元素

// console.log(ulObj.firstElementChild);//-----------------IE8中不支持

// //最后一个子节点

// console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素

// //最后一个子元素

// console.log(ulObj.lastElementChild);//-----------------IE8中不支持

// //某个元素的前一个兄弟节点

// console.log(my$("three").previousSibling.innerText);

// //某个元素的前一个兄弟元素

// console.log(my$("three").previousElementSibling);

// //某个元素的后一个兄弟节点

// console.log(my$("three").nextSibling.innerText);

// //某个元素的后一个兄弟元素

// console.log(my$("three").nextElementSibling);

</script>

</body>

</html>

案例节点操作元素背景颜色

<style>

div{

width: 300px;height: 45epx;

border: 1px solid red;}

</style></head><body>

<span>这是span</span><p>这是p</p>

<span>这是span</span>p>这是p</p>

<span>这是span</span>

//点击按钮,设置p变色---节点的方式做

//先获取div

var dvobj=my$( "dv");//获取里面所有的子节点

var nodes=dvobj. childNodes;//循环遍历所有的子节点

for(var i=e;i<nodes. length;i++){

//判断这个子节点是不是p标签

if(nodes[i]-nodeType==1&&nodes[i].nodeName=="P"){nodes[i].style.backgroundcolor="red";

}

</script>

点击按钮设置div中p标签改变背景颜色

</div>

my$("btn").onclick=function(){

//先获取div

var dvObj=my$("dv");

//获取里面所有的子节点

var nodes=dvObj.childNodes;

//循环遍历所有的子节点

for(var i=0; i<nodes.length; i++){

//判断这个子节点是不是p标签

console.log(nodes[i].nodeType);

console.log(nodes[i].nodeName);

if(nodes[i].nodeType == 1 && nodes[i].nodeName == "P"){

nodes[i].style.backgroundColor="red";

}

</script>

例：节点操作隔行变色

</ul>

//隔行变色

my$("btn").onclick=function () {

var count=0;//记录有多少个li

//获取ul中所有的子节点

var nodes=my$("uu").childNodes;

for (var i=0; i<nodes.length; i++){

//判断这个节点是不是li标签

if(nodes[i].nodeType==1&&nodes[i].nodeName=="LI"){

nodes[i].style.backgroundColor=count%2==0?"red":"yellow";

count++;

}

};

</script>

封装节点兼容代码

第一个节点和第一个元素的获取的代码在IE8中可能不支持

element.firstChild——谷歌和火狐获取的是第一个子节点

element.firstChild——IE8获取的是第一个子元素

element.firstElementChild——谷歌和火狐是第一个子元素，IE8不支持

<ul>

<li>你要跳舞吗</li>

<li>人间惆怅客</li>

</ul>

//获取任意一个父级元素的第一个子级元素

function getFirstElementChild(element){

if(element.firstElementChild){//true——支持

return element.firstElementChild;

}else{

var node=element.firstChild;//第一个节点

while (node&&node.nodeType!-1){

node=node.nextSibling;

}

return node;

}

//获取任意一个父级元素的最后一个子级元素

function getLastElementChild(element){

if(element.lastElementChild){//true——支持

return element.lastElementChild;

}else{

var node=element.lastChild;//第一个节点

while(node&&node.nodeType!=1){

node=node.previousSibling;

}

return node;

}

</script>

案例背景图片切换

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

body {

background: url("http://old.bz55.com/uploads/allimg/151222/139-151222110245.jpg")no-repeat;

}

#im {

width: 700px;

height: 200px;

margin: auto;

display: flex;

justify-content: space-around;

align-items: center;

}

img {

width: 220px;

height: 150px;

cursor: pointer;

}

</style>

</head>

<body>

//定义一个对象获取其中的所有元素标签img

var imobj = document.getElementById("im").children;

//循环遍历img,给每一个img注册点击事件

for (var i = 0; i < imobj.length; i++) {

imobj[i].onclick = function () {

//body背景图片的url路径变成被点击的img

// document.body.style.backgroundImage = " url(" + this.src + ")";

document.body.style.backgroundImage = `url(${this.src})`; //es6 字符串模板写法

}

</script>

</div>

</body>

</html>

全选全不选案例

全选框案例：

核心思路如下：

全选点击事件：单选checked状态跟随全选

单选for循环点击事件：默认flag = ture；只要有一个按钮没选中，flag = false 即全选框就不勾选

scirpt核心代码如下：

//全选点击事件，单选跟随全选

allCheck.onclick = function () {

for (var i = 0; i < oneChecks.length; i++) {

oneChecks[i].checked = this.checked;

}

//单选按钮循环注册点击事件

for (var i = 0; i < oneChecks.length; i++) {

oneChecks[i].onclick = function () {

var flag = true;

//遍历按钮，只要有一个按钮没选中，全选框就不勾选

for (var i = 0; i < oneChecks.length; i++) {

if (!oneChecks[i].checked) {

flag = false;

}

allCheck.checked = flag;

}

全部代码如下：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

* {

margin: 0;

padding: 0;

}

table {

margin-top: 100px;

}

table thead {

background-color: cornflowerblue;

}

table tbody {

background-color: whitesmoke;

cursor: pointer;

}

.bg {

background-color: #a7cbff;

}

</style>

</head>

<body>

<tr>

</tr>

</thead>

<tr>

<td>iPhone 8</td>

</tr>

<tr>

<td>iPhone X</td>

</tr>

<tr>

<td>iPhone 11</td>

</tr>

<tr>

<td>iPhone 12</td>

</tr>

</tbody>

</table>

var allCheck = document.getElementById('a_All');

var oneChecks = document.querySelector('tbody').querySelectorAll('input');

var trs = document.querySelector('tbody').querySelectorAll('tr');

//全选点击事件，单选跟随全选

allCheck.onclick = function () {

for (var i = 0; i < oneChecks.length; i++) {

oneChecks[i].checked = this.checked;

}

//单选按钮循环注册点击事件

for (var i = 0; i < oneChecks.length; i++) {

oneChecks[i].onclick = function () {

var flag = true;

//遍历按钮，只要有一个按钮没选中，全选框就不勾选

for (var i = 0; i < oneChecks.length; i++) {

if (!oneChecks[i].checked) {

flag = false;

}

allCheck.checked = flag;

}

//循环注册鼠标事件划过变色

for (var i = 0; i < trs.length; i++) {

trs[i].onmouseover = function () {

this.className = 'bg';

}

trs[i].onmouseout = function () {

this.className = '';

}

</script>

</body>

</html>

-元素创建的三种方式
    
    
    
<script src="commer.js"></script>



    <script>
        //document.write("标签的代码及内容")
        // ver("wr").οnclick=function () {
        //     document.write("<p>这是一个P</p>");
        // };
        //document.write 缺陷：如果是在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的所有内容全部被干掉
    </script>

    
    
    <script>
        // //对象.innerHTML="标签及代码"
        // ver("inn").οnclick=function () {
        //   ver("dv").innerHTML="<p>让暴风雨来得更猛烈些吧</p>";
        // };
    </script>

    <input type="button" value="创建" id="cj"/>
    <div id="xx"></div>
    <script>
        // // document.createElement("标签的名字")
        ver("cj").οnclick=function () { //创建一个对象
          var pObj=document.createElement("P"); //document.createElement("标签的名字");对象
          setInnerText(pObj,"这是一个p");//把创建后的子元素追加到父级元素中
          ver("xx").appendChild(pObj);//append Child:追加子元素
        };
    </script>

<!DOCTYPE html><html lang="en"><head>

<title>Document</title></head><body>

var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];

// 点击按钮动态创建列表，鼠标放上高亮显示 my$('btn').onclick = function () {

// 动态创建ul，内存中创建对象

var ul = document.createElement('ul');

// 把ul 放到页面上把ul放到DOM树上，并且会重新绘制 my$('box').appendChild(ul);

for (var i = 0; i < datas.length; i++) {

var data = datas[i];

// 在内存中动态创建li

var li = document.createElement('li');

// 把li添加到DOM树，并且会重新绘制 ul.appendChild(li);

// 设置li中显示的内容

// li.innerText = data; setInnerText(li, data);

// 给li注册事件 li.onmouseover = liMouseOver;

li.onmouseout = liMouseOut;

}

// 当鼠标经<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];

// 点击按钮动态创建列表，鼠标放上高亮显示

my$('btn').onclick = function () {

// 动态创建ul，内存中创建对象

var ul = document.createElement('ul');

// 把ul 放到页面上把ul放到DOM树上，并且会重新绘制

my$('box').appendChild(ul);

for (var i = 0; i < datas.length; i++) {

var data = datas[i];

// 在内存中动态创建li

var li = document.createElement('li');

// 把li添加到DOM树，并且会重新绘制

ul.appendChild(li);

// 设置li中显示的内容

// li.innerText = data;

setInnerText(li, data);

// 给li注册事件

li.onmouseover = liMouseOver;

li.onmouseout = liMouseOut;

}

// 当鼠标经过li的时候执行

function liMouseOver() {

// 鼠标经过高亮显示

this.style.backgroundColor = 'red';

}

function liMouseOut() {

// 鼠标离开取消高亮显示

this.style.backgroundColor = '';

}

// 设置标签之间的内容

// function setInnerText(element, content) {

// // 判断当前浏览器是否支持 innerText

// if (typeof element.innerText === 'string') {

// element.innerText = content;

// } else {

// element.textContent = content;

// }

</script>

</body>

</html>过li的时候执行

function liMouseOver() {

// 鼠标经过高亮显示

this.style.backgroundColor = 'red';

}

function liMouseOut() {

// 鼠标离开取消高亮显示

this.style.backgroundColor = '';

}

// 设置标签之间的内容

// function setInnerText(element, content) {

// // 判断当前浏览器是否支持 innerText

// if (typeof element.innerText === 'string') {

// element.innerText = content;

// } else {

// element.textContent = content;

// }

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

案例动态创建表格

<!DOCTYPE html>

<head>

<title>动态生成表格-创建学生数据</title>

<style>

table {

width: 500px;

margin: 100px auto;

border-collapse: collapse;

text-align: center;

}

td,

th {

border: 1px solid #333;

}

thead tr {

height: 40px;

background-color: #ccc;

}

</style>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

//一.先准备学生的数据多个数组元素之间用逗号隔开

var datas = [{

subject: 'JavaScript',

score: 100

}, {

subject: 'JavaScript',

score: 98

}, {

subject: 'JavaScript',

score: 90

}, {

subject: 'JavaScript',

score: 80

}, {

subject: 'JavaScript',

score: 100

}];

// 二.往body里面创建行，有几个人(通过数组的长度可知)我们就创建几行

var tbody = document.querySelector('tbody');

for (var i = 0; i < datas.length; i++) { //外面的for循环管行 tr

// 1.创建行

var tr = document.createElement('tr');

// 2.将行添加到tbody里面

tbody.appendChild(tr);

// 3.行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环遍历得到

for (var k in datas[i]) { //里面的行管列，单元格td var k in obj遍历对象 datas[i]

//创建单元格

var td = document.createElement('td');

//把对象里面的值给td

// console.log(datas[i][k]); datas[i][k]得到的是属性值

td.innerHTML = datas[i][k];

tr.appendChild(td); //将单元格添加到行里面,

}

// 三.创建有删除两个字的单元格

var td = document.createElement('td');

td.innerHTML = '<a href="javascript:;">删除</a>';

tr.appendChild(td); //将td插入到行里

}

// 四.删除操作开始

var as = document.querySelectorAll('a');

for (var i = 0; i < as.length; i++) {

as[i].onclick = function() {

//点击a 删除当前a所在的行(链接的爸爸的爸爸) node.removeChild(child)

tbody.removeChild(this.parentNode.parentNode);

}

// for(var k in obj){ 遍历对象

// k得到的是属性名

// obj[k]得到的是属性值

// }

</script>

</body>

</html>

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

最强开源通用智能体Suna部署调用实战—100%吊打Manus

AI Agent技术社区

【2025年5月】AI生产力再探再报：各家智能体持续内卷，前沿应用不断细分

AI Agent技术社区

【LangGraph】智能体工作流的新基石

AI Agent技术社区

所有评论(0)

查看更多评论

qq_53587164

@qq_53587164

已为社区贡献1条内容