JavaScript中DOM节点常用操作 (节点的增删追加以及节点属性操作)

刺骨的言语ヽ痛彻心扉 2023-06-09 14:26 173阅读 0赞

#### 动态创建DOM节点 ####

var obj = document.createElement(tagName);

例：

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

注意此时仅仅时创建了一个节点对象，并为放入html页面中,接下来需要通过找到父类对象放入想要放的位置，接下来会一一演示

--------------------

#### 将创建的节点插入HTML页面中 ####

① **将创建的节点追加到最后一个节点**

fatherObj.appendChild(obj);

在插入节点后设置节点的值：

obj.innerText = " ";	向标签对中添加内容
    obj.innerHTML = " ";	向标签对中添加HTML标签

**例：** 在li的后面追加li，并在li中添加链接  
   
**效果图：**

![20191021170743551.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>节点操作</title>
    		<script type="text/javascript">
    			window.onload = function(){ 
    				var btn = document.getElementById("btn");
    				btn.onclick = function(){ 
    					var li = document.createElement("li");
    					//li.innerText = "6";向li的标签对中添加内容
    					li.innerHTML = "<a href=‘#’>标签</a>";
    					var ul = document.getElementById("list");
    					ul.appendChild(li);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<ul id="list">
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    			<li>5</li>
    		</ul>
    		<button type="button" id="btn">点击添加</button>
    	</body>
    </html>

**注意：** 在使用追加方法的时候，需要先获取父类对象，通过父类对象调用appendChild方法

**②将创建的节点插入到指定位置**

fatherObj.insertBefore(新节点，参照节点);
    
    其中参照节点可以为null，如果为null的话默认插入到最后一个节点

**例：** 将一个li标签添加到id为special的li后面

**效果图：**

![20191021173543263.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>节点操作</title>
    		<script type="text/javascript">
    			window.onload = function(){ 
    				var btn = document.getElementById("btn");
    				btn.onclick = function(){ 
    					var li = document.createElement("li");
    					li.innerText = "special";
    					var ul = document.getElementById("list");//获取父类对象
    					var re = document.getElementById("special");
    					ul.insertBefore(li,re);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<ul id="list">
    			<li>1</li>
    			<li>2</li>
    			<li id="special">3</li>
    			<li>4</li>
    			<li>5</li>
    		</ul>
    		<button type="button" id="btn">点击添加</button>
    	</body>
    </html>

#### 动态删除节点 ####

fatherObj.removeChild(childNode);

**例**：删除id时special的节点

效果图：  
![20191021174421763.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>节点操作</title>
    		<script type="text/javascript">
    			window.onload = function(){ 
    				var btn = document.getElementById("btn");
    				btn.onclick = function(){ 
    					var ul = document.getElementById("list");//获取父类对象
    					var re = document.getElementById("special");
    					ul.removeChild(re);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<ul id="list">
    			<li>1</li>
    			<li>2</li>
    			<li id="special">3</li>
    			<li>4</li>
    			<li>5</li>
    		</ul>
    		<button type="button" id="btn">点击删除</button>
    	</body>
    </html>

**总结**：通过以上案例，在操作节点的时候都是通过所操作节点的父类对象进而操作节点的

**补充**点东西吧

obj.setAttribute();
    
    可以设置对象的属性，这些属性可以存在例如value，也可以不存在，例如myId等

##### 这就是关于DOM节点的常用操作了 #####

[20191021170743551.gif]: /images/20230531/3e8dbe1c7ef34bba8c23c1db6d5dc78e.png
[20191021173543263.gif]: /images/20230531/e9f3872698ee482da6fda01133de91c1.png
[20191021174421763.gif]: /images/20230531/92a84c8ef9db42e7876d8d4aab71218f.png