js练习5 --- DOM结点操作
Posted 劳埃德·福杰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js练习5 --- DOM结点操作相关的知识，希望对你有一定的参考价值。
第一题
在一个网页中，输入任意两个节点，判断两个节点之间的关系：
1.是否是同胞节点
2.是否是父子节点关系
3.查找其最近的一个共同父节点，可以包括节点自身
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id = "myList"><li>Nan Jing</li><li>Bei Jing</li><li>Shang Hai</li></ul>
<button onclick="addTwoToTail()">在列表末端添加两项</button><br/>
<button onclick="insertBeforeOne()">在第一个节点前插入一个新节点</button><br/>
<button onclick="replaceThird()">替换第三个列表项</button><br/>
<button onclick="shiftSecondToTail()">将第二项移到末尾</button><br/>
<button onclick="removeLastSecond()">移除倒数第二列表项</button><br/>
<button onclick="copy()">在网页中复制该列表</button>
<script>
let list = document.getElementById("myList");
// 在列表末端添加两项
function addTwoToTail()
let elem = document.createElement("li");
let textNode = document.createTextNode("Hang Zhou");
elem.appendChild(textNode);
let elem2 = document.createElement("li");
let textNode2 = document.createTextNode("Guang Zhou");
elem2.appendChild(textNode2);
list.appendChild(elem);
list.appendChild(elem2);
// 在第一个节点前插入一个新节点
function insertBeforeOne()
let elem3 = document.createElement("li");
let textNode = document.createTextNode("Tian Jin");
elem3.appendChild(textNode);
list.insertBefore(elem3, list.childNodes[0]);
// 替换第三个列表项
function replaceThird()
let elem4 = document.createElement("li");
let textNode = document.createTextNode("Wu Han");
elem4.appendChild(textNode);
list.replaceChild(elem4, list.childNodes[2]);
// 将第二项移到末尾
function shiftSecondToTail()
let loc = 1; //第二项的位置
let cloneNode = list.childNodes[loc].cloneNode(true);
list.appendChild(cloneNode);
list.removeChild(list.childNodes[loc]);
// 移除倒数第二列表项
function removeLastSecond()
let loc = list.childNodes.length - 2;
list.removeChild(list.childNodes[loc]);
// 在网页中复制该列表
function copy()
let copyNode = list.cloneNode(true);
document.body.appendChild(copyNode);
</script>
</body>
</html>第二题
在页面上设置不同按钮，对右下已有无序列表中分别实现节点的下面操作：
·在列表末端增加新的两个列表项
·在列表第一个节点前插入新的一个节点
·替换列表中第三个列表项
·将列表中第二项移到末尾
·移除倒数第二列表项
·在网页中复制该列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="node1">编程语言</div>
<ul id="node2">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ul>
<script>
let node1 = document.getElementById("node1");
let node2 = document.getElementById("node2");
let node3 = node2.childNodes[1];
function relation(node1, node2)
if(node1.parentNode == node2.parentNode)
console.log("是同胞节点关系");
else
console.log("不是同胞节点关系");
if(node1.parentNode == node2 || node2.parentNode == node1)
console.log("是父子节点关系");
else
console.log("不是父子节点关系");
// 查找两个节点最近的一个公共父节点
function findCommonNode(node1, node2)
let pNode = node1;
while(pNode)
if(pNode.contains(node2))
return pNode;
pNode = pNode.parentNode;
relation(node1, node2);
console.log(findCommonNode(node1, node2));
relation(node2, node3);
console.log(findCommonNode(node2, node3));
</script>
</body>
</html>以上是关于js练习5 --- DOM结点操作的主要内容，如果未能解决你的问题，请参考以下文章
js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格
js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格
web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）