이번에는 JS를 사용하여 DOM 노드를 추가, 삭제, 수정, 확인할 때의 노트에 대해 소개하겠습니다. 아래에서 실제 사례를 살펴보겠습니다.
DOM 의미: DOM은 브라우저 프로그래밍을 기반으로 하는 API 인터페이스 세트이며 W3C에서 발행한 권장 표준입니다. 이는 JS에 웹 페이지가 로드될 때 노드를 작동하는 기능을 제공합니다. 브라우저는 페이지의 문서 객체 모델을 생성합니다.
W3C의 HTML DOM 표준에 따르면 HTML 문서의 모든 콘텐츠는 노드입니다.1. 전체 문서는 문서 노드입니다. 각 노드는 HTML 요소
요소 노드입니다.4. 각
HTML 속성은 HTML입니다. HTML DOM을 통해 노드 트리의 모든 노드에 액세스할 수 있습니다.
1. 노드를 추가합니다.
1. code>createElement(라벨 이름)는 요소 노드(특정 요소)를 생성합니다.
2.
appendChild(노드) 노드를 추가합니다. 3. 텍스트 콘텐츠)텍스트 노드를 생성합니다var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var opText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。
op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666”
document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素
createElement（标签名）创建一个元素节点（具体的一个元素）。
2、appendChild（节点）追加一个节点。
3、createTextNode（节点文本内容）创建一个文本节点
var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var op1 = document.getElementById("p1");
document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾二、插入节点
1、appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
2、insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。
var removeChild = document.body.removeChild(p1);//移除document对象的方法p1
三、删除、移除节点
1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。
var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2
四、替换节点
1、replaceChild(插入的节点，被替换的节点)
appendChild(노드)도 노드를 삽입하여 추가할 수 있습니다. 2. insertBefore(a,b)는 참조 노드입니다. 즉, 노드가 a 앞에 삽입됩니다. b 노드. for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
}
}
1. removeChild(node) 매개변수를 제거하는 데 사용되는 노드를 삭제합니다(node ). 여전히 문서에 있지만 해당 위치는 더 이상 문서에 없습니다.
var oList = document.getElementById('list');//oList是做的ul的对象
var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象
//通过子节点查找父节点//parentNode：获取父节点
console.log(oChild.parentNode);//在控制器日志中显示父节点
console.log(oList.children);//在控制器日志中显示oList子节点
console.log(children.length)//子节点的个数4. 노드를 교체합니다
1. replaceChild( 삽입된 노드, 교체된 노드) 노드 교체, 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 삽입할 노드이고, 두 번째 매개변수는 교체할 노드이며, 교체된 노드를 반환합니다.
1. childNodes
텍스트 노드와 요소 노드를 포함합니다.//查找第一个子节点的封装函数
function firstChild(ele) {
if (ele.firstElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
return ele.firstElementChild;
} else {
return ele.firstChild;
}
}
firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色parentNode을 포함하여 하위 노드를 얻을 수 있습니다. : 상위 노드 가져오기
//查找最后一个子节点的封装函数
function lastChild(ele) {
if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
return ele.lastElementChild;
} else {
return ele.lastChild;
}
}
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色firstElementChild첫 번째 하위 노드를 찾습니다. 브라우저 호환성 문제가 있습니다. firstChild는 IE와 호환되지만 firstElementChild는 IE와 호환되지 않습니다.
//查找下一个兄弟节点的封装函数
function nextSibling(ele) {
if (ele.nextElementSibling) {
return ele.nextElementSibling;
} else {
return ele.nextSibling;
}
}
nextSibling(oMid).style.background = 'red';lastElementChild마지막 하위 노드를 찾습니다. 브라우저 호환성 문제가 있습니다. lastChild는 IE와 호환되지만 lastElementChild는 IE와 호환되지 않습니다.
//查找上一个兄弟节点的封装函数
function previousSibling(ele) {
if (ele.nextElementSibling) {
return ele.previousElementSibling;
} else {
return ele.previousSibling;
}
}
previousSibling(oMid).style.background = 'red';nextElementSibling
다음 형제 노드를 찾습니다.호환성 문제
도 있습니다.rrreeeD, previousSibling
;
이전 형제 노드를 찾습니다. 호환성 문제도 있습니다.
rrreee
위 내용은 JS는 DOM 노드를 추가, 삭제, 수정 및 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
