JavaScript 노드 및 목록 작업 예제_javascript 기술 요약
- WBOY원래의
- 2016-05-16 15:47:191128검색
이 기사의 예에는 JavaScript 노드 및 목록 작업 방법이 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
(1) 새 노드 생성
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点
(2) 추가, 제거, 교체, 삽입
appendChild() removeChild() replaceChild() insertBefore()
(3) 검색
getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性
이 섹션에서 사용할 HTML 예제
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
1. 요소 노드 생성
document.createElement() 메소드는 요소를 생성하는 데 사용되며 생성할 요소의 태그 이름인 하나의 매개 변수를 허용하고 생성된 요소 노드를 반환합니다
var div = document.createElement("div"); //创建一个div元素
div.id = "myDiv"; //设置div的id
div.className = "box"; //设置div的class
요소를 생성한 후 문서 트리에도 요소를 추가해야 합니다
2. 요소 노드 추가
appendChild() 메소드는 childNodes 목록의 끝에 노드를 추가하고 추가할 요소 노드를 반환하는 데 사용됩니다
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML = "项目四"; //向li内添加文本
ul.appendChild(li); //把li 添加到ul子节点的末尾
추가 후:
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
appendChild() 메소드는 기존 요소를 추가하고 해당 요소를 원래 위치에서 새 위치로 이동할 수도 있습니다
var ul = document.getElementById("myList"); //获得ul
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
실행 후(IE):
<ul id="myList"> <li>项目二</li> <li>项目三</li> <li>项目一</li> </ul>
insertBefore() 메서드는 노드를 마지막에 삽입하지 않고 특정 위치에 배치하려는 경우 이 메서드를 사용합니다. 이 메서드는 2개의 매개변수를 받습니다. 첫 번째는 삽입할 노드이고, 두 번째는 참조 노드이며, 추가할 요소 노드를 반환합니다.
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前
추가 후:
<ul id="myList"> <li>项目四</li> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾
추가 후:
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前
추가 후:
<ul id="myList"> <li>项目一</li> <li>项目四</li> <li>项目二</li> <li>项目三</li> </ul>
3. 요소 노드 제거
노드를 제거하는 데 사용되는removeChild() 메서드는 제거할 노드인 하나의 매개 변수를 수락하고 제거된 노드를 반환합니다. 제거된 노드는 여전히 문서에 있지만 해당 위치는 더 이상 없습니다. 문서
var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
var ul = document.getElementById("myList"); //获得ul
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一个li，与上面不同，要考虑浏览器之间的差异
4. 요소 노드 교체
노드를 교체하는 데 사용되는replaceChild() 메서드는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 삽입할 노드이고 두 번째 매개변수는 교체할 노드이며 교체된 노드를 반환합니다
var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
var ul = document.getElementById("myList"); //获得ul;
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li
5. 노드 복사
노드를 복사하는 데 사용되는 cloneNode() 메서드는 부울 매개변수를 허용합니다. true는 전체 복사(노드와 모든 하위 노드 복사)를 의미하고, false는 얕은 복사(하위 노드가 아닌 노드 자체 복사)를 의미합니다.
var ul = document.getElementById("myList"); //获得ul
var deepList = ul.cloneNode(true); //深复制
var shallowList = ul.cloneNode(false); //浅复制
다음은 JavaScript를 사용하여 목록 프로젝트를 생성하고 하위 노드를 복사하는 전체 예입니다.
이 JavaScript 코드는 목록 항목을 표시 및 생성하고, 하위 노드를 복사하고, 노드 트리를 복사하는 매우 유용한 예이며, 특히 트리 메뉴를 생성할 때 유용합니다.
작동 효과는 아래와 같습니다.
구체적인 코드는 다음과 같습니다.
<html>
<head>
<title>建立列表项目</title>
<script language="JavaScript">
function printChilds(objNode) {
var strMsg = "节点名称 =" + objNode.nodeName + "\n";
if (objNode.hasChildNodes()){
var nodeCount = objNode.childNodes.length;
strMsg += "子节点数 = " + objNode.childNodes.length + "\n";
for(var i = 0; i < nodeCount; i++)
strMsg += "标记名称 = " + objNode.childNodes[i].nodeName + "\n";
alert(strMsg);
}
}
function copyNode(objNode, objDupNode, deep){
var tempNode = objDupNode.cloneNode(deep);
objNode.appendChild(tempNode);
}
</script>
</haed>
<body id="myBody">
<h2>建立列表项目</h2>
<hr>
<ul id="myUL">
<li>项目1
<li>项目2
<ol id="myOL">
<li>次项目1
<li>次项目2
</ol>
<li>项目3
</ul>
<form>
<input type="button" value="显示列表的子节点" onclick="printChilds(myUL)">
<input type="button" value="复制节点" onclick="copyNode(myUL, myUL.childNodes[1], false)">
<input type="button" value="复制节点树" onclick="copyNode(myUL.lastChild, myOL, true)">
</form>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.