javascript_DOM节点操作_ZHOU125disorder_

最新推荐文章于 2024-07-30 10:56:44 发布

zjing125

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量132

点赞数

分类专栏： javascript基础文章标签： javascript DOM节点操作

本文链接：https://blog.csdn.net/ZHOU125disorder/article/details/112647337

版权

javascript基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

`DOM节点操作`

DOM节点操作有:创建，添加，删除，替换

`创建元素节点`

    <script>
    var oli=document.createElement("li");
    console.log(oli);
    </script>

<li></li>

`添加元素节点`

在指定节点内部末尾添加一个新的子节点，父.appendChild(子)。

	<body>
		<ol></ol>
		<script>
			var oli=document.createElement("li");
			var ol=document.getElementsByTagName("ol")[0];
			oli.appendChild(ol);
			console.log(ol);
		</script>
	</body>

<ol>
	<li>
	</li>
</ol>

`创建文本节点 (createTextNode)`

<body>
	<ol></ol>
	<script>
		var text=document.createTextNode("卡卡西");//创建文本节点
 		var ol=document.getElementsByTagName("ol")[0];//获取ol
 		ol.appendChild(text);//把添加的文本节点添加到ol内部
 		console.log(ol);
	</script>
</body>

	<ol>卡卡西</ol>

`使用其它方法添加文本到标签内部`

<body>
	<ol></ol>
	<script>
		var ol=document.getElementsByTagName("ol")[0];
        var oli=document.createElement("li");
        oli.innerHTML="卡卡西";
        ol.appendChild(oli);
        console.log(ol);
	<script>
</body>

<ol>
	<li>
		卡卡西
	</li>
</ol>

`DOM节点操作`

	<body>
    <ul>
        <li>卡卡西</li>
        <li>我爱罗</li>
        <li>薛之谦</li>
        <li>华晨宇</li>
    </ul>
    <script>
        var ul=document.getElementsByTagName("ul")[0];//获取ul
        var ul_node=ul.childNodes;//获取ul下的全部字节点
        console.log(ul_node);//输出ul下的全部字节点
        //结果为NodeList(9){分别为5个text,4个li}
        //text为ul与li之间的空格和li与li之间的空格
        console.log(ul.firstChild);//输出第一个字节点结果(#text)
        console.log(ul.lastChild);//输出最后一个字节点结果(#text)
        //parentNode 返回字节点的父节点
        var li=document.getElementsByTagName("li");
        console.log(li[0].parentNode);//输出li内部是卡卡西的父节点
        console.log(li[1].nextSibling);//输出该节点的下一个节点
        console.log(li[2].previousSibling);//输出该节点的上一个节点
        //输出元素节点      加上Element
        console.log(ul.firstElementChild);//输出ul下的第一个元素节点
        console.log(ul.lastElementChild);//输出ul下的最后一个元素节点
        console.log(li[0].nextElementSibling);//输出第一个li的下一个元素节点
        console.log(li[2].previousElementSibling);//第2个节点的上一个元素节点
    </script>
</body>

`删除节点_remove()`

	<body>
    <ul>
        <li>卡卡西</li>
        <li>我爱罗</li>
        <li>薛之谦</li>
        <li>华晨宇</li>
    </ul>

    <script>
        var ul=document.getElementsByTagName("ul")[0];//获取ul
        var li=document.getElementsByTagName("li");//获取ul下的li
        // 第一种删除的方法      夫.removeChild(子);     (子为要删除的元素)
        ul.removeChild(ul.firstElementChild);//删除ul下的第一个元素节点
        console.log(ul);//输出ul
    </script>
</body>

	    //该方法js中没有但可以单独使用其删除当一起使用时会报错
        //第2种删除的方法       (要删除的元素).remove()
        li[3].remove();
      	console.log(ul)//不建议使用

`替换节点_replaceChild()`

<body>
    <div>
        <p>卡卡西</p>
    </div>

    <script>
        var div=document.getElementsByTagName("div")[0];
        var p=document.getElementsByTagName("p")[0];
        var newp=document.createElement("p");
        newp.innerHTML="我爱罗";
        div.replaceChild(newp,p);
    </script>
</body>

`after与before添加节点`

父.insertBefore(添加节点,位置)          在指定子节点之前插入新的节点

<body>
    <ul>
        <li>卡卡西</li>
    </ul>

    <script>
        var ul=document.getElementsByTagName("ul")[0];
        var ul_li=document.getElementsByTagName("li")[0];
        var uli=document.createElement("li");// 父.insertBefore(添加节点,位置)     在指定子节点之前插入新的节点
        uli.innerHTML="我爱罗";
        ul.insertBefore(uli,ul_li);		//在指定子节点之前插入新的节点
        ul.after(uli);			//之后
        ul.before(uli);			//之前
    </script>
</body>

zjing125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_DOM节点操作_ZHOU125disorder_

DOM节点操作DOM节点操作有:创建，添加，删除，替换创建元素节点 <script> var oli=document.createElement("li"); console.log(oli); </script><li></li>添加元素节点在指定节点内部末尾添加一个新的子节点，父.appendChild(子)。 <body> <ol></ol> <
复制链接

扫一扫

专栏目录