JS는 DOM 노드를 추가, 삭제, 수정 및 확인합니다.

이번에는 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是指向元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向元素

2. 노드 삽입

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(插入的节点，被替换的节点)

1. appendChild(노드)도 노드를 삽입하여 추가할 수 있습니다.

2. insertBefore(a,b)는 참조 노드입니다. 즉, 노드가 a 앞에 삽입됩니다. b 노드.

for (var i = 0; i <strong></strong>

3. 노드 삭제

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';//将获得的节点的背景变成红色

2, A, children은 또한 IE6-8B,

parentNode을 포함하여 하위 노드를 얻을 수 있습니다. : 상위 노드 가져오기

//查找最后一个子节点的封装函数
function lastChild(ele) {
  if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
    return ele.lastElementChild;
  } else {
    return ele.lastChild;
  }
}
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色

3, A, firstChild ;

firstElementChild첫 번째 하위 노드를 찾습니다. 브라우저 호환성 문제가 있습니다. firstChild는 IE와 호환되지만 firstElementChild는 IE와 호환되지 않습니다.

//查找下一个兄弟节点的封装函数
function nextSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.nextElementSibling;
  } else {
    return ele.nextSibling;
  }
}
nextSibling(oMid).style.background = 'red';

B, lastChild ;

lastElementChild마지막 하위 노드를 찾습니다. 브라우저 호환성 문제가 있습니다. lastChild는 IE와 호환되지만 lastElementChild는 IE와 호환되지 않습니다.

//查找上一个兄弟节点的封装函数
function previousSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.previousElementSibling;
  } else {
    return ele.previousSibling;
  }
}
previousSibling(oMid).style.background = 'red';

C, nextSibling ;

nextElementSibling

다음 형제 노드를 찾습니다.

호환성 문제

도 있습니다.

rrreeeD, previousSibling
;

previousElementSibling

이전 형제 노드를 찾습니다. 호환성 문제도 있습니다.
rrreee

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서🎜🎜🎜JS에서 일반적으로 사용되는 수학 함수는 무엇인가요? 🎜🎜🎜🎜🎜사용자 정의 구성 요소에서 v-model을 활성화하기 위해 vue를 작동하는 방법🎜🎜🎜

위 내용은 JS는 DOM 노드를 추가, 삭제, 수정 및 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!