JavaScript对DOM的操作

最新推荐文章于 2022-11-05 22:06:23 发布

山有魂兮

最新推荐文章于 2022-11-05 22:06:23 发布

阅读量135

点赞数

文章标签： DOM JavaScript

本文链接：https://blog.csdn.net/weixin_39844423/article/details/102586807

版权

一、DOM节点的获取方法：

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()       //IE 5678 不支持

 .parentNode                 //父节点元素
 .children					 //子元素的集合
 .firstElementChild    		 //第一个子元素节点
 .lastElementChild   		 //最后一个子元素节点
 .previousElementSibling     //前一个元素节点
 .nextElementSibling         //后一个元素节点

二、DOM节点添加、移除、替换：

	.insertBefore(A,B)		// 在B子节点前面添加A子节点
	.appendChild(A)			// 添加A子节点（子节点的末尾）
	.removeChild(A)			// 移除A子节点
	.replaceChild(A,B)		// 用A子节点替换B子节点

三、DOM元素/属性/文本创建：

	.createElement('p')					// 创建元素
 	.createAttribute('src')				// 创建属性
    .createTextNode('啦啦啦')			// 创建文本
    .getAttribute('href')				// 获取属性
    .setAttribute('title','my-title')	// 设置属性

四、使用讲解

结构代码

<body>
	<div id="mydiv">
		<p class="myp">第一个子节点</p>
		<p class="myp"></p>
	</div>
</body>

A、添加元素

//方法一
		//添加元素
		var NewChild  = document.createElement('p');
		document.body.appendChild(NewChild);
		// 添加文本
	    var childText = document.createTextNode('方法一添加子元素');
	    NewChild.appendChild(childText)
	    //添加title属性
	    var childAtt  = document.createAttribute('title');
    	childAtt.value = "my-title";
    	NewChild.setAttributeNode(childAtt);
    	// 等价于 NewChild.setAttribute('title','my-title');

//方法二		(创建此节点是没有子元素，不然内容会被删除，覆盖)
		var mydiv = document.getElementById('mydiv');
    	mydiv.innerHTML = "<p>方法二添加子元素</p>";
    	mydiv.title = "my-title";

B、删除元素/节点

//方法一
		//删除div元素	(从body节点出发)
		var mydiv = document.getElementById('mydiv');
		document.body.removeChild(mydiv)

//方法二
		//删除div元素  	(从自身节点出发)
		var mydiv = document.getElementById('mydiv');
		mydiv.parentNode.removeChild(mydiv)

//方法三
		//删除div元素  	(从子节点出发)
		var myps = document.getElementsByClassName("myp");
    	myps[0].parentNode.parentNode.removeChild(myps[0].parentNode)

//方法四
		//删除div元素  	(从兄弟节点出发,需要存在相邻的节点)
		var mydiv = document.getElementById('mydiv');
   	 	document.body.replaceChild(mydiv.nextElementSibling,mydiv) //下一个子元素代替div元素，从而删除
   	 	//document.body.replaceChild(mydiv.previousElementSibling,mydiv)	//上一个子元素代替div元素，从而删除

C、添加文本/属性

//方法一	
		var myps = document.getElementsByClassName("myp");
		//添加文本
	    var childText = document.createTextNode('添加的文本');
	    myps[1].appendChild(childText)
	    //添加title属性
	    var childAtt  = document.createAttribute('title');
    	childAtt.value = "my-title";
    	myps[1].setAttributeNode(childAtt);
    	// 等价于 myps[1].setAttribute('title','my-title');

//方法二 	（p标签不能这样添加name属性（无意义），input标签可以）
		var myps = document.getElementsByClassName("myp");
		//添加文本
		myps[1].innerText = "添加的文本" 		//myps[1].innerHTML = "添加的文本"
	    //添加title属性
    	myps[1].title = "my-title"			//myps[1].setAttribute('title','my-title')
    	//添加class属性
    	myps[1].className += ' myClass';    //去除'+',就是覆盖

山有魂兮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对DOM的操作

一、DOM节点的获取方法：getElementById()getElementsByTagName()getElementsByClassName() //IE 5678 不支持 .parentNode //父节点元素 .firstElementChild //第一个子元素节点 .lastElementChild //...
复制链接

扫一扫