DOM_Basic 지식의 다양한 유형의 요소에 대한 일반적인 JavaScript 작업을 구성합니다.-JS 튜토리얼-php.cn

노드 유형
노드 유형
다음은 몇 가지 중요한 nodeType 값입니다.
1: 요소요소
2: 속성 속성
3: 텍스트 텍스트
8: 댓글
9: 문서문서

노드이름,노드값

노드 관계
childNodes: 각 노드에는 NodeList 객체를 저장하는 childNodes 속성이 있습니다

firstChild: childNodes[0]와 동일

lastChild: childNodes.length-1과 동일

동시에 목록에 있는 각 노드의 PreviousSibling 및 nextSibling 속성을 사용하여 동일한 목록에 있는 다른 노드에 액세스할 수 있습니다.

운영노드
appendChild()

appendChild() 메서드는 childNodes 목록 끝에 노드를 추가하는 데 사용됩니다. 노드를 추가한 후, 새 노드, 상위 노드 및 childNodes의 이전 마지막 하위 노드의 관계 포인터가 그에 따라 업데이트됩니다.

insertBefore()
insertBefore() 이 메서드는 삽입할 노드와 참조로 사용되는 노드라는 두 가지 매개 변수를 허용합니다.

// 插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode,null);

// 插入后成为第一个节点
returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

// 插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

로그인 후 복사

repaceChild()
repaceChild()는 삽입할 노드와 교체할 노드라는 두 개의 매개변수를 허용합니다

var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

로그인 후 복사

removeChild()
노드를 제거만 하고 교체하지 마세요.

var formerFirstChild = someNode.removeChild(someNode.firstChild);

로그인 후 복사

cloneNode()

항목 1
항목 2
항목 3

var deepList = myList.cloneNode(true);
console.log(deepList.length); // 3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

로그인 후 복사

문서 종류

문서 노드는 다음과 같은 특징을 갖습니다.

nodeType의 값은 9입니다.
nodeName의 값은 #document입니다.
nodeValue의 값이 null입니다.
parentNode의 값이 null입니다.
ownerDocument 값이 null입니다.

문서의 하위 노드

var html = document.documentElement; // 取得对<html>的引用
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true

로그인 후 복사

문서정보

// 取得文档的标题
var originalTitle = document.title; 

// 设置文档标题
document.title = "New page title";

// 取得完整的url
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得来源页面的url
var referrer = document.referrer;

//假设页面来自p2p.wrox.com域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 失败

로그인 후 복사

IE7에서 document.getElementById("myElement");를 호출하면 아래와 같이 가장 좋은 방법은 양식 필드의 이름 속성을 다른 요소의 ID와 동일하게 만들지 않는 것입니다.

<input type="text" name="myElement" value="text field">
<div id="myElement">a div</div>

로그인 후 복사

스페셜 컬렉션

문서 작성

<html>
<head>
   <title>document.write() Example 3</title>
</head>
<body>
   <script type="text/javascript">
     document.write("<script type=\"text/javascript\" src=\"file.js\">") + "<\/script>");
   </script>
</body>
</html>

로그인 후 복사

문자열은 외부 스크립트 태그의 닫는 태그로 사용되지 않으므로 페이지에 중복되는 내용이 없습니다.

요소 유형
요소 노드는 다음과 같은 특징을 갖습니다.

요소의 태그 이름에 액세스하려면 nodeName 속성 또는 tagName 속성을 사용할 수 있습니다.

<div id="myDiv"></div>
var div = document.getElementById("myDiv");
console.log(div.tagName); // DIV
console.log(div.nodeName); // DIV


if (element.tagName=="div") { // 不能这样比较，很容易出错
}

if (element.tagName.toLowerCase =="div") { // 这样最好（适用于任何文档）
}

로그인 후 복사

특성 획득
속성을 조작하는 세 가지 주요 DOM 메소드, 즉 getAttribute(), setAttribute() 및 RemoveAttribute()가 있습니다. getAttribute()에 전달된 속성 이름은 실제 속성 이름과 동일합니다. 클래스의 속성 값을 얻으려면 "className" 대신 "class"를 전달해야 하는 것 같습니다.

var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd

로그인 후 복사

요소 생성
document.createElement() 메서드를 사용하여 새 요소를 생성할 수 있습니다.

요소의 하위 노드
작업을 수행하기 전에 일반적으로 다음 예와 같이 nodeType 속성을 먼저 확인해야 합니다.

for (var i=0; len = element.childNodes.length; i<len; i++){
  if (element.childNodes[i].nodeType ==1) {
    // 执行某些操作
  }
}

로그인 후 복사

Text类型
Text节点具有以下特征：

nodeType的值为3；
nodeName的值为"#text";
nodeValue的值为节点所包含的文本；
parentNode是一个Element；

创建文本节点
可以使用document.createTextNode()创建新文本节点。

规范化文本节点
normalize()

分割文本节点
splitText()

Comment类型
comment节点具有下列特征：

nodeType的值为8;
nodeName的值为"#comment";
nodeValue的值是注释的内容；
parentNode可能是Document或Element；
不支持（没有）子几点；

DOM操作技术
操作表格

 // 创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

// 创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));


// 创建第二行
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));

document.body.appendChild(table);

로그인 후 복사

选择符API
querySelector()方法

// 取得body元素
var tbody = document.querySelector('body');

// 取得ID为"myDIV"的元素
var myDIV = document.querySelector("#myDiv");

// 取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");

// 取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");

로그인 후 복사

querySelectorAll()方法

// 取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");

// 取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");

// 取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

로그인 후 복사

HTML5
与类相关的扩充
getElementsByClassName()方法：
该方法可以通过document对象及所有HTML元素调用该方法。

// 取得所有类中包含"username"和"current"的元素。类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

// 取得ID为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

로그인 후 복사

焦点管理

HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); // true

로그인 후 복사

默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

var button = document.getElementById("myButton");
botton.focus();
alert(document.hasFocus()); // true

로그인 후 복사