JavaScript 노드 및 목록 작업 예제_javascript 기술 요약
이 기사의 예에는 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 프로그래밍 설계에 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7613
15
1387
52
88
11
68
19
29
136
PyCharm 사용 튜토리얼: 작업 실행에 대해 자세히 안내합니다.
Feb 26, 2024 pm 05:51 PM
PyCharm은 매우 인기 있는 Python 통합 개발 환경(IDE)으로 Python 개발을 더욱 효율적이고 편리하게 만들어주는 다양한 기능과 도구를 제공합니다. 이 기사에서는 PyCharm의 기본 작동 방법을 소개하고 독자가 도구 작동을 빠르게 시작하고 능숙하게 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 1. PyCharm 다운로드 및 설치 먼저 PyCharm 공식 웹사이트(https://www.jetbrains.com/pyc)로 이동해야 합니다.
sudo란 무엇이며 왜 중요한가요?
Feb 21, 2024 pm 07:01 PM
sudo(수퍼유저 실행)는 일반 사용자가 루트 권한으로 특정 명령을 실행할 수 있도록 하는 Linux 및 Unix 시스템의 핵심 명령입니다. sudo의 기능은 주로 다음 측면에 반영됩니다. 권한 제어 제공: sudo는 사용자에게 일시적으로 수퍼유저 권한을 얻을 수 있는 권한을 부여하여 시스템 리소스와 민감한 작업을 엄격하게 제어합니다. 일반 사용자는 필요할 때만 sudo를 통해 임시 권한을 얻을 수 있으며, 항상 슈퍼유저로 로그인할 필요는 없습니다. 향상된 보안: sudo를 사용하면 일상적인 작업 중에 루트 계정을 사용하지 않아도 됩니다. 모든 작업에 루트 계정을 사용하면 올바르지 않거나 부주의한 작업에는 전체 권한이 부여되므로 예기치 않은 시스템 손상이 발생할 수 있습니다. 그리고
Linux Deploy 작업 단계 및 주의사항
Mar 14, 2024 pm 03:03 PM
LinuxDeploy 작업 단계 및 주의 사항 LinuxDeploy는 사용자가 Android 장치에 다양한 Linux 배포판을 신속하게 배포하여 모바일 장치에서 완전한 Linux 시스템을 경험할 수 있도록 도와주는 강력한 도구입니다. 이 기사에서는 LinuxDeploy의 작동 단계와 주의 사항을 자세히 소개하고 독자가 이 도구를 더 잘 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 작업 단계: Linux 설치배포: 먼저 설치
win10 부팅 암호를 얻기 위해 F2 키를 누르는 것을 잊은 경우 수행할 작업
Feb 28, 2024 am 08:31 AM
아마도 많은 사용자들이 집에 사용하지 않는 컴퓨터가 여러 대 있고, 오랫동안 사용하지 않았기 때문에 시동 암호를 완전히 잊어버렸기 때문에 암호를 잊어버린 경우 어떻게 해야 하는지 알고 싶습니까? 그럼 함께 살펴볼까요? win10 부팅 암호를 입력하는 데 F2 키를 잊어버린 경우 어떻게 해야 합니까? 1. 컴퓨터의 전원 버튼을 누른 다음 컴퓨터를 켤 때 F2 키를 누릅니다(컴퓨터 브랜드마다 BIOS에 들어가는 버튼이 다릅니다). 2. BIOS 인터페이스에서 보안 옵션을 찾으세요(컴퓨터 브랜드에 따라 위치가 다를 수 있음). 일반적으로 상단의 설정 메뉴에 있습니다. 3. 그런 다음 SupervisorPassword 옵션을 찾아 클릭합니다. 4. 이때 사용자는 자신의 비밀번호를 볼 수 있으며 동시에 옆에 있는 활성화를 찾아 Dis로 전환합니다.
Huawei Mate60 Pro 스크린샷 작업 단계 공유
Mar 23, 2024 am 11:15 AM
스마트폰이 대중화되면서 스크린샷 기능은 일상적인 휴대폰 사용에 필수적인 기술 중 하나로 자리 잡았습니다. Huawei의 주력 휴대폰 중 하나인 Huawei Mate60Pro의 스크린샷 기능은 자연스럽게 사용자로부터 많은 관심을 끌었습니다. 오늘은 모두가 더욱 편리하게 스크린샷을 찍을 수 있도록 Huawei Mate60Pro 휴대폰의 스크린샷 작업 단계를 공유하겠습니다. 우선, Huawei Mate60Pro 휴대폰은 다양한 스크린샷 방법을 제공하며, 개인 습관에 따라 자신에게 맞는 방법을 선택할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 차단에 대한 자세한 소개입니다.
PHP PDO 튜토리얼: 기초부터 숙달까지 고급 가이드
Feb 19, 2024 pm 06:30 PM
1. PDO 소개 PDO는 PHP의 확장 라이브러리로 데이터베이스를 작동하는 객체 지향 방식을 제공합니다. PDO는 Mysql, postgresql, oracle, SQLServer 등을 포함한 다양한 데이터베이스를 지원합니다. PDO를 사용하면 개발자가 통합 API를 사용하여 다양한 데이터베이스를 운영할 수 있으므로 개발자가 서로 다른 데이터베이스 간에 쉽게 전환할 수 있습니다. 2. PDO를 데이터베이스에 연결합니다. PDO를 사용하여 데이터베이스에 연결하려면 먼저 PDO 개체를 생성해야 합니다. PDO 객체의 생성자는 데이터베이스 유형, 호스트 이름, 데이터베이스 사용자 이름 및 비밀번호라는 세 가지 매개변수를 받습니다. 예를 들어, 다음 코드는 mysql 데이터베이스에 연결하는 객체를 생성합니다: $dsn="mysq
PHP 문자열 조작: 공백을 효과적으로 제거하는 실용적인 방법
Mar 24, 2024 am 11:45 AM
PHP 문자열 작업: 공백을 효과적으로 제거하는 실용적인 방법 PHP 개발 시 문자열에서 공백을 제거해야 하는 상황에 자주 직면하게 됩니다. 공백을 제거하면 문자열이 더 깔끔해지고 후속 데이터 처리 및 표시가 쉬워집니다. 이 기사에서는 공백을 제거하는 몇 가지 효과적이고 실용적인 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 방법 1: PHP 내장 함수인 Trim()을 사용합니다. PHP 내장 함수인 Trim()을 사용하면 문자열 양쪽 끝의 공백(공백, 탭, 개행 등 포함)을 제거할 수 있어 매우 편리하고 쉽습니다. 사용.
Ele.me에서 WeChat을 연결하는 방법
Apr 01, 2024 pm 03:46 PM
Ele.me는 다양한 종류의 음식을 온라인으로 선택하고 주문할 수 있는 소프트웨어입니다. 판매자는 주문을 받은 후 즉시 주문을 처리합니다. 사용자는 소프트웨어를 통해 WeChat을 연결할 수 있습니다. 작동 방법을 알아보려면 PHP 중국어 웹사이트를 확인하세요. Ele.me를 WeChat에 바인딩하는 방법: 1. 먼저 Ele.me 소프트웨어를 열고 홈페이지에 들어간 후 오른쪽 하단에 있는 [내]를 클릭합니다. 2. 그런 다음 내 페이지에서 [계정]을 클릭합니다. ] 왼쪽 상단에 있는 3. 그런 다음 휴대폰, WeChat, Alipay 및 Taobao를 연결할 수 있는 개인 정보 페이지로 이동합니다. 4. 마지막 클릭 후 필요한 WeChat 계정을 선택합니다. WeChat 인증 페이지에 접속하고 [허용]을 클릭하세요.
