더 자세한 javascript DOM 연구 노트_javascript 기술
- PHP中文网원래의
- 2016-05-16 19:03:40917검색
많은 js dom 학습 자료를 읽은 후 이 자료가 매우 상세하다는 것을 알았으므로
1. DOM 기본
1. 문서--가장 다른 모든 노드가 연결되는 최상위 노드입니다.
DocumentType - 하위 노드를 포함할 수 없는 DTD 참조(1a309583e26acea4f04ca31122d8c535 구문 사용)의 객체 표현입니다.
DocumentFragment - Document와 같은 다른 노드를 저장할 수 있습니다.
요소 - 8bf259f5a6144433b921fb8b7de949700e9100648b0b4b6da2ed8dd45e1a0e54 또는 c5732311c9bc8f9578856d5c0fe1f791와 같이 시작 태그와 종료 태그 사이의 콘텐츠를 나타냅니다. 이는 속성과 하위 노드를 모두 포함할 수 있는 유일한 노드 유형입니다.
Attr - 속성 이름과 속성 값의 쌍을 나타냅니다. 이 노드 유형은 하위 노드를 포함할 수 없습니다.
텍스트 - XML 문서의 시작 태그와 종료 태그 사이에 있거나 CDataSection에 포함된 일반 텍스트를 나타냅니다. 이 노드 유형은 하위 노드를 포함할 수 없습니다.
CDataSection - 706a388e39e8555a9742f4594c5343bf의 객체 표현입니다. 이 노드 유형은 텍스트 노드 Text만 하위 노드로 포함할 수 있습니다.
엔티티 - f3953a0c47aa44cfd43076fe8e65b58d와 같은 DTD의 엔터티 정의를 나타냅니다. 이 노드 유형은 하위 노드를 포함할 수 없습니다.
EntityReference - "와 같은 엔터티 참조를 나타냅니다. 이 노드 유형은 하위 노드를 포함할 수 없습니다.
ProcessingInstruction - PI를 나타냅니다. 이 노드 유형은 하위 노드를 포함할 수 없습니다.
Comment - XML 주석을 나타냅니다. 이 노드
표시법 - DTD에 정의된 표기법을 나타냅니다.
노드 인터페이스는 모든 노드 유형에 포함되는 속성과 메서드를 정의합니다.
DOM은 노드 외에도 노드와 함께 사용할 수 있지만 DOM 문서의 필수 부분은 아닌 일부 도우미 개체를 정의합니다.
NodeList - 요소의 하위 노드를 나타내는 데 사용되는 값에 따라 색인이 지정된 노드 배열입니다.
NamedNodeMap - 요소 특성을 나타내는 데 사용되는 값과 이름으로 색인된 노드 테이블입니다.
2. 관련 노드에 액세스
다음 섹션에서 다음 HTML 페이지를 고려하세요
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
</html>ab9f710e8a95de8822eb06cf01adf4e6 요소에 액세스하려면(이것이 문서의 문서 요소라는 점을 이해해야 함) 문서의 documentElement 속성을 사용할 수 있습니다.
var oHtml = document.documentElement;
이제 oHtml 변수에는 ab9f710e8a95de8822eb06cf01adf4e6을 나타내는 HTMLElement 개체가 포함되어 있습니다. 5d86db81e494b82c29e979209d098205 및 b2636b4e0e32f7cd731b9073897693b7 요소를 얻으려면 다음을 수행할 수 있습니다.
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
동일한 작업을 수행하기 위해 childNodes 속성을 사용할 수도 있습니다. 대괄호로 표시된 일반 자바스크립트 배열로 처리하면 됩니다.
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
대괄호는 실제로는 자바스크립트로 NodeList를 간단하게 구현합니다. 실제로 childNodes 목록에서 하위 노드를 가져오는 공식적인 방법은 item() 메서드를 사용하는 것입니다.
var oHead = oHtml.childNodes.item(0)
var oBody = oHtml.childNodes.item( 1)
HTML DOM 페이지는 document.body를 b2636b4e0e32f7cd731b9073897693b7 요소에 대한 포인터로 정의합니다.
var oBody = document.body;
oHtml, oHead 및 oBody 세 가지 변수를 사용하여 이들 사이의 관계를 확인할 수 있습니다.
alert(oHead.parentNode==oHtml);
alert (oBody.parentNode==oHtml);
alert(oBody.previousSibling==oHead);
alert(bHead.nextSibling==oBody);
alert(oHead.ownerDocument==document)
위의 내용은 모두 "true"를 출력합니다.
3. 속성 처리
앞서 언급했듯이 Node 인터페이스에는 이미 속성 메서드가 있고 모든 유형의 노드에 상속되었지만
Element 노드만 속성을 가질 수 있습니다. Element 노드의 속성 속성은 실제로 컨텐츠에 액세스하고 처리하기 위한 몇 가지 메소드를 제공하는 NameNodeMap입니다.
getNamedItem(name)--nodename 속성 값이 name과 동일한 노드를 반환합니다.
removeNamedItem(name) --delete nodename 속성 값이 name과 같은 노드;
setNamedItem(node)--nodeName 속성에 따라 목록 및 인덱스에 노드를 추가합니다.
item(pos)--NodeList와 마찬가지로, node at position pos ;
참고: 이러한 메서드는 속성 값이 아닌 Attr 노드를 반환한다는 점을 기억하세요.
NamedNodeMap 객체에는 포함된 노드 수를 나타내는 길이 속성도 있습니다.
NamedNodeMap을 사용하여 속성을 나타내는 경우(각 노드는 Attr 노드임) nodeName 속성은 속성 이름으로 설정되고 nodeValue 속성은 속성 값으로 설정됩니다. 예를 들어
f703f6ab3d857132f2daf9892a29a3a9Hello world!94b3e26ee717c64999d7867364b1b4a3
동시에 변수 oP가 있다고 가정해 보겠습니다. 이 요소 Quote에 대한 포인터를 포함합니다. 따라서 다음과 같이 id 속성 값에 액세스할 수 있습니다.
var sId = oP.attributes.getNamedItem("id").nodeValue;
물론 id 속성에 숫자로 액세스할 수도 있지만 이는 다음과 같습니다. 약간 직관적이지 않음:
var sId = oP.attributes.item(1).nodeValue;
nodeValue 속성에 새 값을 할당하여 id 속성을 변경할 수도 있습니다.
oP.attributes.getNamedItem( "id").nodeValue=" newId";
Attr 노드에는 nodeValue 속성과 완전히 동일하고 완전히 동기화되는 value 속성이 있으며 nodeName 속성과 동기화되는 name 속성이 있습니다. 우리는 이러한 속성을 자유롭게 사용하여 속성을 수정하거나 변경할 수 있습니다.
이 메서드는 다소 번거롭기 때문에 DOM은 속성에 액세스하는 데 도움이 되는 세 가지 요소 메서드를 정의합니다.
getAttribute(name) - attribute.getNamedItem(name).value와 동일
setAttribute(name,newvalue) -- attribute.getNamedItem(이름).value=newvalue;
removeAttribute(이름)과 동일 --attribute.removeNamedItem(이름)과 동일합니다.
4. 지정된 노드에 액세스
(1)getElementsByTagName()
Core(XML) DOM은 getElementsByTagName() 메소드를 정의하여 tagName() A NodeList를 반환합니다. 태그 이름) 속성이 지정된 값과 동일한 요소입니다. Element 객체에서 tagName 속성은 항상 미만 기호 바로 뒤에 오는 이름과 동일합니다. 예를 들어 6ed09268cbdd0015bce8dcbbdfa9bfe4의 tagName은 "img"입니다. 다음 코드 줄은 문서의 모든 6ed09268cbdd0015bce8dcbbdfa9bfe4 요소 목록을 반환합니다.
var oImgs = document.getElementsByTagName("img");
oImgs에 모든 그래픽을 저장한 후 대괄호만 사용하세요. 또는 Item() 메서드(getElementsByTagName()가 childNodes와 동일한 NodeList를 반환함)를 사용하면 하위 노드에 액세스하는 것처럼 이러한 노드에 하나씩 액세스할 수 있습니다.
alert(oImgs[0].tagName) //outputs "IMG"
페이지의 첫 번째 단락에 있는 모든 이미지만 가져오려면 다음과 같이 첫 번째 단락 요소에서 getElementsByTagName()을 호출하면 됩니다.
var oPs = document.getElementByTagName("p ") ;
var oImgsInp = oPs[0].getElementByTagName("img");
별표 메서드를 사용하여 문서의 모든 요소를 가져올 수 있습니다.
var oAllElements = document.getElementsByTagName("* " );
매개변수가 별표인 경우 IE6.0은 모든 요소를 반환하지 않습니다. 대신 Document.all을 사용해야 합니다.
(2)getElementsByName()
HTML DOM은 name 속성이 지정된 값과 동일한 모든 요소를 가져오는 데 사용되는 getElementsByName()을 정의합니다.
(3)getElementById()
这是HTML DOM定义的第二种方法，它将返回id特性等于指定值的元素。在HTML中，id特性是唯一的－－这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。
注：如果给定的ID匹配某个元素的name特性，IE6.0还会返回这个元素。这是一个bug，也是必须非常小心的一个问题。
5.创建新节点
最常用到的几个方法是
createDocumentFragment()－－创建文档碎片节点
createElement(tagname)－－创建标签名为tagname的元素
createTextNode(text)－－创建包含文本text的文本节点
createElement()、createTextNode()、appendChild()
<html>
<head>
<title>createElement() Example</title>
<script type="text/javascript">
function createMessage() {
var oP = document.createElement("p");
var oText = document.createTextNode("Hello World!");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createMessage()">
</body>
</html>removeChild()、replaceChild()、insertBefore()
删除节点
<html>
<head>
<title>removeChild() Example</title>
<script type="text/javascript">
function removeMessage() {
var oP = document.body.getElementsByTagName("p")[0];
oP.parentNode.removeChild(oP);
}
</script>
</head>
<body onload="removeMessage()">
<p>Hello World!</p>
</body>
</html>替换
<html>
<head>
<title>replaceChild() Example</title>
<script type="text/javascript">
function replaceMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.body.getElementsByTagName("p")[0];
oOldP.parentNode.replaceChild(oNewP, oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>Hello World!</p>
</body>
</html>新消息添加到旧消息之前
<html>
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function insertMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.getElementsByTagName("p")[0];
document.body.insertBefore(oNewP, oOldP);
}
</script>
</head>
<body onload="insertMessage()">
<p>Hello World!</p>
</body>
</html>createDocumentFragment()
一旦把节点添加到document.body（或者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，然而，当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，假如想创建十个新段落。
<html>
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function addMessages() {
var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
var oFragment = document.createDocumentFragment();
for (var i=0; i < arrText.length; i++) {
var oP = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body onload="addMessages()">
</body>
</html>6.让特性像属性一样
大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。
假设有如下图像元素：
08eb671a6313b025fb2bd3d7f685f6c2
如果要使用核心的DOM来获取和设置src和border特性，那么要用getAttribute()和setAttribute()方法：
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而，使用HTML DOM，可以使用同样名称的属性来获取和设置这些值：
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和属性名不一样的特例是class属性，它是用来指定应用于某个元素的一个CSS类，因为class在ECMAScript中是一个保留字，在javascript中，它不能被作为变量名、属性名或都函数名。于是，相应的属性名就变成了className;
注：IE在setAttribute()上有很大的问题，最好尽可能使用属性。
7.table方法
为了协助建立表格，HTML DOM给262fd5136f53c62e9a44a1fc2132297a,eb657ed06fa1cb552a30705c60d76f5d和bed2e7b14a405456e17405df6936f9bb等元素添加了一些特性和方法。
给262fd5136f53c62e9a44a1fc2132297a元素添加了以下内容：
| 特性/方法 | 说明 |
| caption | 指向f7a5eba2d0f16371ee005a8b211f0ae6元素并将其放入表格 |
| tBodies | eb657ed06fa1cb552a30705c60d76f5d元素的集合 |
| tFoot | 指向f396c81ab2d6506b0e1dd3149bd49748元素（如果存在） |
| tHead | 指向123c34ba660610a744463a4eef99d319元素（如果存在） |
| rows | 表格中所有行的集合 |
| createTHead() | 创建123c34ba660610a744463a4eef99d319元素并将其放入表格 |
| createTFood() | 创建f396c81ab2d6506b0e1dd3149bd49748元素并将其放入表格 |
| createCpation() | 创建f7a5eba2d0f16371ee005a8b211f0ae6元素并将其放入表格 |
| deleteTHead() | 删除123c34ba660610a744463a4eef99d319元素 |
| deleteTFood() | 删除f396c81ab2d6506b0e1dd3149bd49748元素 |
| deleteCaption() | 删除f7a5eba2d0f16371ee005a8b211f0ae6元素 |
| deleteRow(position) | 删除指定位置上的行 |
| insertRow(position) | 在rows集合中的指定位置上插入一个新行 |
eb657ed06fa1cb552a30705c60d76f5d元素添加了以下内容
| 特性/方法 | 说明 |
| rows | eb657ed06fa1cb552a30705c60d76f5d中所有行的集合 |
| deleteRow(position) | 删除指定位置上的行 |
| insertRow(position) | 在rows集合中的指定位置上插入一个新行 |
bed2e7b14a405456e17405df6936f9bb 요소는 다음 콘텐츠를 추가합니다
| 特性/方法 | 说明 |
| cells | bed2e7b14a405456e17405df6936f9bb元素中所有的单元格的集合 |
| deleteCell(postion) | 删除给定位置上的单元格 |
| insertCell(postion) | 在cells集合的给点位置上插入一个新的单元格 |
8. DOM 탐색
NodeIterator, TreeWalker
DOM Level2 기능은 Mozilla 및 Konqueror/Safari에서만 사용할 수 있으며 여기서는 소개하지 않습니다.