JavaScript_Basic 지식을 바탕으로 HTML DOM 노드를 작동하는 기본 튜토리얼
- WBOY원래의
- 2016-05-16 15:11:031677검색
DOM이 있기 때문에 JavaScript를 통해 노드를 획득, 생성, 수정 또는 삭제할 수 있습니다.
참고: 아래 제공된 예의 요소는 모두 요소 노드입니다.
노드 가져오기
부자관계
element.parentNode element.firstChild/element.lastChild element.childNodes/element.children
형제관계
element.previousSibling/element.nextSibling element.previousElementSibling/element.nextElementSibling
노드 간의 직접적인 관계를 통해 노드를 획득하면 코드의 유지 관리성이 크게 떨어지지만(노드 간 관계의 변화는 노드 획득에 직접적인 영향을 미칩니다), 이 문제는 인터페이스를 통해 효과적으로 해결할 수 있습니다.
노드 간의 직접적인 관계를 통해 노드를 획득하면 코드의 유지 관리성이 크게 떨어지지만(노드 간 관계의 변화는 노드 획득에 직접적인 영향을 미칩니다), 이 문제는 인터페이스를 통해 효과적으로 해결할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ELEMENT_NODE & TEXT_NODE</title>
</head>
<body>
<ul id="ul">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<p>Hello</p>
<script type="text/javascript">
var ulNode = document.getElementsByTagName("ul")[0];
console.log(ulNode.parentNode); //<body></body>
console.log(ulNode.previousElementSibling); //null
console.log(ulNode.nextElementSibling); //<p>Hello</p>
console.log(ulNode.firstElementChild); //<li>First</li>
console.log(ulNode.lastElementChild); //<li>Fourth</li>
</script>
</body>
</html>
NTOE: 주의깊은 사람들은 노드 탐색의 예에서 body, ul, li 및 p 노드 사이에 공백이 없다는 것을 알게 될 것입니다. 왜냐하면 공백이 있으면 공백이 TEXT 노드로 간주되기 때문입니다. 따라서 ulNode.previousSibling을 사용하면 25edfb22a4f469ecb59f1190150159c6Firstbed06894275b65c1ab86501b08a632eb 노드 대신 빈 텍스트 노드를 가져옵니다. 즉, 노드 탐색의 여러 속성은 모든 노드 유형을 가져오는 반면 요소 탐색은 해당 요소 노드만 가져옵니다. 일반적인 상황에서는 요소 노드의 순회 속성이 더 일반적으로 사용됩니다.
element.children의 브라우저 호환 버전 구현
일부 구형 브라우저는 element.children 메서드를 지원하지 않지만 다음 메서드를 사용하여 호환성을 확보할 수 있습니다.
<html lang>
<head>
<meta charest="utf-8">
<title>Compatible Children Method</title>
</head>
<body id="body">
<div id="item">
<div>123</div>
<p>ppp</p>
<h1>h1</h1>
</div>
<script type="text/javascript">
function getElementChildren(e){
if(e.children){
return e.children;
}else{
/* compatible other browse */
var i, len, children = [];
var child = element.firstChild;
if(child != element.lastChild){
while(child != null){
if(child.nodeType == 1){
children.push(child);
}
child = child.nextSibling;
}
}else{
children.push(child);
}
return children;
}
}
/* Test method getElementChildren(e) */
var item = document.getElementById("item");
var children = getElementChildren(item);
for(var i =0; i < children.length; i++){
alert(children[i]);
}
</script>
</body>
</html>
참고: 이 호환성 방법은 예비 초안이며 호환성 테스트를 거치지 않았습니다.
요소 노드를 가져오기 위한 인터페이스
getElementById getElementsByTagName getElementsByClassName querySelector querySelectorAll
getElementById
문서에서 지정된 ID를 가진 노드 개체를 가져옵니다.
var element = document.getElementById('id');
getElementsByTagName
지정된 태그가 있는 요소 노드 컬렉션을 동적으로 가져옵니다(해당 반환 값은 DOM 변경에 영향을 받으며 해당 값도 변경됩니다). 이 인터페이스는 요소를 통해 직접 얻을 수 있으며 문서에 직접 작용할 필요가 없습니다.
// 示例
var collection = element.getElementsByTagName('tagName');
// 获取指定元素的所有节点
var allNodes = document.getElementsByTagName('*');
// 获取所有 p 元素的节点
var elements = document.getElementsByTagName('p');
// 取出第一个 p 元素
var p = elements[0];
getElementsByClassName
지정된 요소에서 지정된 클래스를 가진 모든 노드를 가져옵니다. 여러 클래스 옵션은 순서에 관계없이 공백으로 구분할 수 있습니다.
var 요소 = element.getElementsByClassName('className');
참고: IE9 이하는 getElementsByClassName
을 지원하지 않습니다.
호환 가능한 방법
function getElementsByClassName(root, className) {
// 特性侦测
if (root.getElementsByClassName) {
// 优先使用 W3C 规范接口
return root.getElementsByClassName(className);
} else {
// 获取所有后代节点
var elements = root.getElementsByTagName('*');
var result = [];
var element = null;
var classNameStr = null;
var flag = null;
className = className.split(' ');
// 选择包含 class 的元素
for (var i = 0, element; element = elements[i]; i++) {
classNameStr = ' ' + element.getAttribute('class') + ' ';
flag = true;
for (var j = 0, name; name = className[j]; j++) {
if (classNameStr.indexOf(' ' + name + ' ') === -1) {
flag = false;
break;
}
}
if (flag) {
result.push(element);
}
}
return result;
}
}
querySelector / querySelectorAll
들어오는 CSS 선택기와 일치하는 목록의 첫 번째 요소 또는 모든 요소를 가져옵니다(반환 결과는 후속 DOM 수정에 영향을 받지 않으며 획득 후에도 변경되지 않습니다).
var listElementNode = element.querySelector('selector');
var listElementsNodes = element.querySelectorAll('selector');
var sampleSingleNode = element.querySelector('#className');
var sampleAllNodes = element.querySelectorAll('#className');
참고: IE9는 querySelector 및 querySelectorAll을 지원하지 않습니다
노드 생성
노드 생성 -> 속성 설정 -> 노드 삽입
var element = document.createElement('tagName');
노드 수정
텍스트 콘텐츠
노드와 해당 하위 노드의 텍스트 콘텐츠를 가져오거나 설정합니다(노드의 모든 텍스트 콘텐츠에 대해).
element.textContent; // 获取 element.textContent = 'New Content';
참고: IE 9 이하는 지원되지 않습니다.
innerText(W3C 규격 아님)
노드와 그 하위 항목의 텍스트 콘텐츠를 가져오거나 설정합니다. textContent와 거의 동일하게 작동합니다.
element.innerText;
참고: W3C 사양을 준수하지 않으며 FireFox 브라우저를 지원하지 않습니다.
FireFox 호환성 솔루션
if (!('innerText' in document.body)) {
HTMLElement.prototype.__defineGetter__('innerText', function(){
return this.textContent;
});
HTMLElement.prototype.__defineSetter__('innerText', function(s) {
return this.textContent = s;
});
}
노드 삽입
appendChild
지정된 요소 내에 요소 노드를 추가합니다.
var aChild = element.appendChild(aChild);
삽입전에
지정된 요소의 지정된 노드 앞에 지정된 요소를 삽입합니다.
var aChild = element.insertBefore(aChild, referenceChild);
노드 삭제
지정된 노드의 하위 요소 노드를 삭제합니다.
var child = element.removeChild(child);
innerHTML
지정된 노드의 모든 HTML 콘텐츠를 가져오거나 설정합니다. 이전의 모든 내부 컨텐츠를 대체하고 완전히 새로운 노드 배치를 생성합니다(이전에 추가된 이벤트 및 스타일 제거). innerHTML은 내용을 확인하지 않고 직접 실행되어 원본 내용을 대체합니다.
참고: 이는 새로운 노드를 생성할 때만 권장됩니다. 사용자 제어 하에 사용해서는 안 됩니다.
var elementsHTML = element.innerHTML;
存在的问题+
- 低版本 IE 存在内存泄露
- 安全问题（用户可以在名称中运行脚本代码）
PS: appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点，
//由于这两种方法操作的都是某个节点的子节点，所以必须现取得父节点，代码中 someNode 表示父节点 //使用appendChild()方法插入节点 var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode) //true //使用insertBefore()方法插入节点 var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode) //true
值得注意的是，如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。
<div id="test">
<div>adscasdjk</div>
<div id="a">adscasdjk</div>
</div>
<script type="text/javascript">
var t = document.getElementById("test");
var a = document.getElementById('a');
//var tt = a.cloneNode(true);
t.appendChild(a);
</script>
在这段代码中，页面输出的结果和没有Javascript时是一样的，元素并没有被复制，由于元素本来就在最后一个位置，所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置，就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个，然后添加到文档中，那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方，而不影响被复制的元素。下面使用了cloneNode()方法，实现节点的深度复制，使用这种方法复制的节点会脱离文档流。当然，我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。
<div id="test">
<div>adscasdjk</div>
<div id="a">adscasdjk</div>
</div>
<script type="text/javascript">
var t = document.getElementById("test");
var a = document.getElementById('a');
var tt = a.cloneNode(true);
t.appendChild(tt);
</script>
相似的操作方法还有 removeNode(node)删除一个节点，并返回该节；replaceNode(newNode，node)替换node节点，并返回该节点。这两种方法相对来说更容易使用一些。