이번에는 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>元素
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(插入的节点,被替换的节点)
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]);//在控制器日志中显示找到的元素节点
}
}
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
;
이전 형제 노드를 찾습니다. 호환성 문제도 있습니다.
rrreee
위 내용은 JS는 DOM 노드를 추가, 삭제, 수정 및 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!