javascript之DOM，javascriptdom
一、節點層次
1、node類型
nodeName、nodeValue 以及 nodeType 包含有關於節點的資訊。
每個節點都有一個nodeType屬性
值-元素類型
1-ELEMENT
2-ATTRIBUTE
3-TEXT
4-CDATA
5-ENTITY REFERENCE
6-ENTITY
7-PI (processing instruction)
8-COMMENT
9-DOCUMENT
10-DOCUMENT TYPE
11-DOCUMENT FRAGMENT
12-NOTATION
nodeName 屬性含有某個節點的名稱。
元素節點的 nodeName 是標籤名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
注釋：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的
nodeValue
對於文本節點，nodeValue 屬性包含文本。
對於屬性節點，nodeValue 屬性包含屬性值。
nodeValue 屬性對於文檔節點和元素節點是停用。
2、節點關係
每一個節點都有一個childNodes屬性，可以通過方括弧也可以通過item()方法來訪問
此外還有以下屬性
parentNode
previousSibling
nextSibling
firstChild
lastChild
另外還有hasChildNodes()方法用來判斷節點是否含有子節點
3、動作節點
appendChild()一個參數
insertBefore()兩個參數，將第一個參數表示的節點插入到第二個參數表示的節點的前面，如果第二參數為null，則插入到最後
replaceChild()兩個參數，將第二個參數表示的節點替換為第一個參數表示的節點
removeChild()一個參數
cloneNode()一個布爾參數，true表示深度複製，複製節點本身以及子節點，false表示只複製節點本身不複製子節點
二、Document類型
1、文檔的子節點
document.documentElement指向html
document.body指向body
document.doctype
2、文檔資訊
document.title
document.URL
document,domain
document.referer
3、尋找元素
document.getElementById()
document.getElementByTagName():返回NodeList,可以通過方括弧訪問也可以通過item()訪問,如果參數為*,可以取得文檔中所有元素
namedItem():通過元素的name屬性從元素集合中取得如：document.getElementByTagName().namedItem()
document.getElementsByName()
4、特殊集合
document.anchors:文檔中所有帶name特性的<a>元素
document.forms:文檔中所有<form>元素
document.images:文檔中所有<img>元素
document.links:文檔中所有帶href特性的<a>元素
5、DOM一致性檢測
document.implementation.hasFeature()
6、文檔寫入
document.write()
document.writeln()
document.open()
docuemnt.close()
三、Element類型
1、HTML元素標準特性
id
title
lang
dir
className對於class的值
這些屬性可以被讀取也可以被賦值修改
2、取得特性
getAttribute()
3、設定特性和刪除
setAttribute()
removeAttribute()
4、attributes屬性
包含一個NamedNodeMap，擁有如下方法
getNamedItem(name)
removeNamedItem(name)
setNamedItem(node)
item(pos)
與此對應的方法有getAttribute(),setAttribute(),removeAttribute()
四、Text類型
document.createTextNode()
splitText()
五、Comment類型
。。。。
Dom擴充
1、選擇符
querySelector()只返回第一個匹配的元素
querySelectorAll()返回所有匹配的元素
2、元素遍曆
以下只取得元素，不包括注釋和文本節點
childElementCount子項目的個數
firstElementChild
lastElementChild
previuosElementSibling
nextElementSibling
3、HTML5
getElementByClassName()
classList屬性包括的方法有：
add()
contains()
remove()
toggle()
插入標記
innerHTML 屬性
outerHTML 屬性
insertAdjacentHTML():兩個參數，第一個參數必須如下
beforebegin
afterbegin
beforeend
afterend
scrollIntoView()參數為true或者false
children屬性，與childNodes差不多，但是children只包括還是元素的子節點
插入文本
innerText
outerText
首先你要知道什麼是dom
dom不是javascript，dom是文檔。
dom是一組用來描述指令碼怎麼與結構化文檔進行互動和訪問的web標準。
dom定義了一系列對象、方法和屬性，用於訪問、操作和建立文檔中的內容、結構、樣式以及行為。
dom可以說就是為了獲得對象而存在的。
如果你有其他的方法，你就可以替代dom的作用。
教：javascript中DOM建立動態層的小問題，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<button onclick="document.body.removeChild(document.getElementById('dynamic'));this.style.display='none';">刪除</button>
<SCRIPT LANGUAGE="JavaScript">
<!--
//var dydiv=document.createElement("DIV");
//dydiv.setAttribute("ID","dynamic");
//dydiv.cssText="position:absolute;left:100px;top:100px";
//var text=document.createTextNode("you are welcome!!!!");
//dydiv.appendChild(text);
//document.body.appendChild(dydiv);
//改成:
document.write("<div id=\"dynamic\" style=\"position:absolute;left:100px;top:100px;\">You are welcome!</div>");
//-->
</SCRIPT>
</BODY>
</HTML>
用你自己的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=&quo......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
