web前端js基础之“增”、“删”、“改”、“查”

最新推荐文章于 2022-06-28 06:45:00 发布

空投在我怀里

最新推荐文章于 2022-06-28 06:45:00 发布

阅读量1.9k

点赞数 1

分类专栏： web前端js基础文章标签： js javascript

本文链接：https://blog.csdn.net/wrk2466836002/article/details/82426539

版权

web前端js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、(insertBefore、appendChild增) (removeChild删) (replaceChild改) （dom查,分类、ID）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新建、追加、删除、替换、文本节点</title>
</head>
<body>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div id="Idc">ID查找</div>
    <div class="lei">类查找</div>
</body>
</html>

<script>
    var one = document.getElementsByTagName("ol")[0];
    var Idc = document.getElementById("Idc");

    var lis = one.children;

    var oneT = document.createElement("span");
    var twoT = document.createElement("span");
    var three = document.createElement("span");

    oneT.innerText = "选择添加的位置";
    twoT.innerText = "确定位置";
    three.innerText = "将内容添加进去";

   var newT = "<span>选择添加的位置</span>";

     lis[0].appendChild(oneT);
     lis[1].appendChild(twoT);
     lis[2].appendChild(three);

    one.insertBefore(lis[0],lis[1]);
    //父节点.insertBefore(要插入的节点,这个节点上面)

    one.replaceChild(oneT,lis[0]);
    //父节点.replaceChild（您希望插入的节点对象，您希望删除的节点对象。）

    //方法1： one.removeChild(lis[0]);
    //方法2：lis[0].parentNode.removeChild(lis[0]);//找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
    //父节点.removeChild(删除的节点)

    //(insertBefore、appendChild增) (removeChild删) (replaceChild改) （dom查,分类、ID）
</script>

二、关于查找节点（childNodes）介绍，children（子节点）、parentNode（返回父节点）也可以算变相的查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>childNode</title>
	</head>
	<body>
		<ul id="ul">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
<script>
	//nodeType属性返回以数字值返回指定节点的节点类型

//如果节点是元素节点，则 nodeType 属性将返回 1。
//属性节点的nodeType属性值是2。
//文本节点的nodeType属性值是3。
	window.onload = function(){
		var firstul = document.getElementById("ul");

		for (var i = 0;i<firstul.childNodes.length; i++) {
			if(firstul.childNodes[i].nodeType == 1){
				firstul.childNodes[1].style.background = "red"
			}
		}

	}
	//结论：想使用nodeType给指定的子元素，添加属性，就必须给定判断类型值！！
</script>

三、其他（clonenode克隆）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>clonenode克隆</title>
	</head>
	<body>
		<button>增加</button>
		<ul>
			
		</ul>
	</body>
</html>
<script>
	den();
	function den(){
		var btn = document.getElementsByTagName("button")[0];
		var firstul = document.getElementsByTagName("ul")[0];
		btn.onclick = function(){
			var newli = document.createElement("li");//1创一个li
			newli.innerHTML = "新建的li及文字";//2.li里面加入文字
			firstul.appendChild(newli);//3.追加到ul的最后面
			firstul.appendChild(firstul.cloneNode())
		}
	}
</script>

空投在我怀里

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端js基础之“增”、“删”、“改”、“查”

一、(insertBefore、appendChild增) (removeChild删) (replaceChild改) （dom查,分类、ID）&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;新建、追加、删除、替换、
复制链接

扫一扫

专栏目录