js DOM节点操作：增删改查复制

最新推荐文章于 2024-03-17 21:53:33 发布

Very mini

最新推荐文章于 2024-03-17 21:53:33 发布

阅读量2.5k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_44440256/article/details/86585218

版权

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
DOM 是 Document Object Model（文档对象模型）的缩写。

    节点：根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
    1、整个文档时一个文档节点。
    2、每个HTML元素是元素节点。
    3、HTML元素内的文本是文本节点。
    4、每个HTML属性是属性节点。
    5、每个注释是注释节点。

1.增加
document.createElement 创建一个元素节点
obj.appendChild 追加子节点
createTextNode（节点文本内容）创建一个文本节点

//创建ul
	    var a=document.createElement('ul')
		//创建li
		var li1=getLi('首页');
		var li2=getLi('新闻');
		var li3=getLi('活动');
		var li4=getLi('关于');
		//将li添加到ul中
		a.appendChild(li1);
		a.appendChild(li2);
		a.appendChild(li3);
		a.appendChild(li4);
		//将ul添加到body中
		document.body.appendChild(a);
		//创建文本节点
		var a=document.createTextNode('哈哈哈');
		document.body.appendChild(a);

2.删除
删除节点：
obj.removeChild 需要从父节点下删除

		var removeChild = document.body.removeChild(div1);//移除document对象的方法div1

3.修改
replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

<body>
	<div id="box">222</div>
	<div id="box1">333</div>
	<script type="text/javascript">
	    var c=document.getElementById('box1');
		var j=document.createElement('p');
		j.innerHTML='888';
		document.body.replaceChild(j,c);//替换节点
		  </script>
</body>

4.插入
appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。

<body>
	<div id="box">222</div>
	<div id="box1">333</div>
	<script type="text/javascript">
	    var o=document.getElementById('box');
	    var oDiv=document.createElement('div');
		oDiv.innerHTML='新来的';
		o.appendChild(oDiv);//追加到原来的div中
		var p=document.createElement('p');
		p.innerHTML='大家好';
		o.appendChild(p);//追加到后面
		o.insertBefore(p,oDiv);//内部指定位置插入节点
		  </script>
</body>

5.复制
复制节点：
cloneNode(flag)
flag 布尔类型 true 复制包含子节点 false 不包含子节点默认为false

<body>
    <div id="box">
        <div>盒子</div>
        <p>段落</p>
    </div>
    <div>外部</div>
    <script type="text/javascript">
    	var a=document.getElementById('box');
    	var a1=a.cloneNode(true);//复制节点
    	document.body.appendChild(a1);//追加
    </script>
</body>

6.查找

节点对象的属性：
childNodes     获取所有的子节点(元素节点、文本节点)    NodeList   索引 0    length  节点个数
firstChild
lastChild
parentNode  父节点
previousSibling   上一个兄弟节点
nextSibling    下一个兄弟节点

<body>
	<div id="box">内容
		<p>aaa</p>
		<p>aaa</p>
		<p>aaa</p>
	</div>
	<ul id="banner"><li>AAA</li><li>AAA</li><li>AAA</li></ul>
  </body>
   <script type="text/javascript">
   	var o=document.getElementById('box');
   	var s=o.childNodes;
   	s[1].innerHTML='AAA';//修改内容
   	console.log(s.length);
   	console.log(o.firstChild);//第一个孩子
   	o.firstChild.nextSibling.innerHTML='sss';
   	console.log(o.lastChild);//最后一个孩子
    
    var u=document.getElementById('banner');
    var u1=u.childNodes;
    u1[0].innerHTML='aaa';
    u.firstChild.innerHTML='ddd';
    u.lastChild.innerHTML='vvv';
   </script>

Very mini

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
js DOM节点操作：增删改查复制

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”DOM 是 Document Object Model（文档对象模型）的缩写。节点：根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： ...
复制链接

扫一扫