JavaScript:DOM节点操作

DOM节点操作

节点操作的概述如下:

1)创建节点:可以使用 DOM 提供的方法来创建新的节点,例如使用 createElement 方法创建元素节点,使用 createTextNode 方法创建文本节点等。

2)添加节点:可以使用 appendChild 方法将一个节点添加到另一个节点的末尾,或者使用 insertBefore 方法将一个节点插入到指定位置。

3)删除节点:可以使用 removeChild 方法从父节点中移除一个节点。

4)替换节点:可以使用 replaceChild 方法将一个节点替换为另一个节点。

5)修改节点:可以使用节点的属性和方法来修改节点的内容、样式等。例如,使用nodeValue 属性来修改文本节点的值,使用 setAttribute 和 removeAttribute 方法来修改或删除元素节点的属性。

6)查询节点:可以使用查询节点的方法来获取文档中的节点。例如,使用 getElementById 方法根据 id 获取指定的元素节点,使用 getElementsByTagName 方法获取指定标签名的元素集合等。

1、创建节点 createElement()

要创建一个新的元素节点,可以使用document.createElement()方法。该方法接受一个参数,即要创建的元素的标签名。

以下是一个创建新节点的示例代码:

   <style>

        .myClass {

            color: blue;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div id="parent">

    </div>

    <script>

       //1.创建新的节点

       var newElement=document.createElement('div')



       //2.添加节点属性

       newElement.setAttribute('id','myDiv')

       newElement.setAttribute('class','myClass')



       //3.创建文本节点

       var newtext=document.createTextNode('Hello World')

       //使用appendChild()方法将其添加到新节点中

       newElement.appendChild(newtext)



       //4.获取父节点

       var parentEmelent=document.getElementById('parent')

       //使用appendChild()方法将新节点添加到父节点中

       parentEmelent.appendChild(newElement)



      //通过这些步骤,我们成功地创建了一个新节点,并将其添加到了HTML文档中。

    </script>

2.添加节点 appendChild()

要向现有的父节点中添加子节点,可以使用appendChild()方法。该方法接受一个参数,即要添加的子节点。

以下是一个向父节点添加子节点的示例代码:

// 1.获取父节点

var parentElement = document.getElementById("parent");

 

// 2.创建新节点

var newElement = document.createElement("div");

 

//3. 添加子节点到父节点中

parentElement.appendChild(newElement);

在这个例子中,我们首先使用getElementById()方法获取了一个父节点。然后,我们使用createElement()方法创建了一个新的div元素节点。最后,我们使用appendChild()方法将新节点添加到父节点中。通过这些步骤,我们成功地向父节点中添加了一个子节点。

3.删除节点 removeChild()

要删除一个节点,可以使用removeChild()方法。该方法接受一个参数,即要删除的节点。

以下是一个删除节点的示例代码:

//1. 获取要删除的节点

var elementToRemove = document.getElementById("element-to-remove");

 

//2. 获取要删除节点的父节点

var parentElement = elementToRemove.parentNode;

 

// 3.从父节点中删除要删除的节点

parentElement.removeChild(elementToRemove);

在这个例子中,我们首先使用getElementById()方法获取要删除的节点。然后,我们使用parentNode属性获取该节点的父节点。最后,我们使用removeChild()方法从父节点中删除要删除的节点。这样,我们成功地删除了指定的节点。

4、替换节点 replaceChild()

要替换一个节点,可以使用replaceChild()方法。该方法接受两个参数,第一个参数是要替换的新节点,第二个参数是要被替换的旧节点。

以下是一个替换节点的示例代码:

// 1.创建新节点

var newElement = document.createElement("div");

newElement.textContent = "这是新节点";

 

//2. 获取要替换的旧节点

var oldElement = document.getElementById("element-to-replace");

 

// 3.获取要被替换节点的父节点

var parentElement = oldElement.parentNode;

 

//4. 替换旧节点为新节点

parentElement.replaceChild(newElement, oldElement);

 在这个例子中,我们首先使用createElement()方法创建了一个新节点,并设置了其文本内容。

然后,我们使用getElementById()方法获取要被替换的旧节点。

接下来,我们使用parentNode属性获取要被替换节点的父节点。最后,我们使用replaceChild()方法将新节点替换旧节点。这样,我们成功地替换了节点。 

5、修改节点 innerHTML

要修改一个节点的内容,可以使用textContent属性或innerHTML属性来设置节点的新内容。

以下是一个修改节点内容的示例代码

// 1.获取要修改的节点

var element = document.getElementById("element-to-modify");

 

// 2.使用textContent属性修改节点内容

element.textContent = "新的内容";

 

// 3.使用innerHTML属性修改节点内容

element.innerHTML = "<strong>新的内容</strong>";

6、查询节点 getElementById()

要查询节点,可以使用querySelector()方法或getElementById()方法来选择节点。

以下是一个查询节点的示例代码:

// 使用querySelector()方法查询节点

var element1 = document.querySelector("#element-to-query");

 

// 使用getElementById()方法查询节点

var element2 = document.getElementById("element-to-query");

 

// 打印查询到的节点

console.log(element1);

console.log(element2);

在这个例子中,我们首先使用querySelector()方法通过CSS选择器来查询节点。在querySelector()方法中,我们可以使用类名、标签名、ID等选择器来指定要查询的节点。

然后,我们使用getElementById()方法使用节点的ID来查询节点。最后,我们使用console.log()方法将查询到的节点打印出来。

7.总结

以下是总结节点操作的表格形式:

 

 通过以上表格,可以清晰地了解节点操作的不同类型及其描述。这些操作可用于对表格进行增删改查等操作,以实现对表格数据的动态更新和操作。     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值