DOM
概念
Document Object Model
- 文檔對象模型
- DOW 是針對HTML 和XML 文檔的一個api ,
- DOM 中描述了一個層級化的節點樹，
- 允許開發人員進行添加，移除和修改頁面中的某一部分
- W3C 中的DOM 標準化分為三部分
- 核心DOM - 針對任何結構化文檔的標準模型
- XML DOM - 針對XML結構化文檔的標準模型
- HTML DOM - 針對HTML 文檔的標準模型
- HTML DOM 是關于如何獲取，修改，添加 或者刪除
- HTML 元素的標準，即操作HTML 元素
- api: 應用程序編程接口
<html>
<head>
<title>DOM</title>
</head>
<body>
</body>
</html>
獲取的信息：
- Document 節點是每一個文檔的根節點
- Document 節點下 有一個HTML 節點
- 我們將這個節點稱為文檔元素
- 文檔元素是文檔最外層的元素，其他的
- 元素都包含在文檔元素之中
- 一個文檔只能有一個文檔元素，在HTML
- 中，文檔元素永遠是<html>元素
- 在DOW 數中，html文檔的每一處標記
- 都可以用樹中的一個節點來表示
- html元素標簽-元素節點來表示
- 屬性-> 屬性節點 來表示
- 文檔類型-> 文檔類型節點 來表示
- 注釋-> 注釋節點 來表示
- 這部分是作為前期需要做好的鋪墊內容
- 通用的 Document 和 Element 類型 與
- HTMLDocument 和 HTMLElement 是有區分的
Document 只代表一個 HTML 或者 XML 文檔Element 類型代表的是該文檔的一個元素HTMLDocument 和 HTMLElement 子類只針對 HTML 文檔 和 元素
DOM 中 節點分類（12種類型）需要記的（需要記住）
可以在網上查到
/*
需要記住的文檔類型節點
*
* 1.元素 Node.ELEMENT_NODE
* 2.屬性 Node.ATTRIBUTE_NODE
* 3.文本 Node.TEXT_NODE
* 4.注釋 Node.COMMENT_NODE
* 5.文檔 Node.DOCUMENT_NODE
* */
Node.ELEMENT_NODE //元素
Node.ATTRIBUTE_NODE //元素中的屬性
Node.TEXT_NODE //純文本（沒有子節點）
Node.CDATA_SECTION_NODE //子節點是TextNode
Node.ENTITY_REFERENCE_NODE
//文檔中的實體引用
Node.ENTITY_NODE
//DTD 中實體定義
Node.PROCESSING_INSTRUCTION_NODE
//一個文檔處理程序中
//使用的特有指令
Node.COMMENT_NODE
//注釋
Node.DOCUMENT_NODE
//最外層的 根節點
Node.DOCUMENT_TYPE_NODE
//文檔類型定義
Node.DOCUMENT_FRAGMENT_NODE
//更小型的 Document 節點
//定義這個數據類型主要是為
//了方便只希望提取文檔的
//某一部分時使用
Node.NOTATION_NODE
//DTD 的 Nation 定義
//在 XML 文檔中表示一個符號
節點屬性
1. nodeName
節點名稱
* nodeName 是只讀的
* nodeName 始終包含HTML 元素的大小寫字母 標簽名
2. nodeValue
節點
或者進行設置或返回節點的值
3. nodeType
節點的類型
## DOM核心對象-document 對象
JS 中是通過Document 類型來表示文檔
在瀏覽器中，document 的對象是HTMLDocument
表示整個HTML界面
而且document 對象是 window對象各個屬性
我們可以將其當做全局對象來訪問
nodeType: 9（上面的內容第九個）
nodeName: #document
nodeValue: null
parentNode:null（父節點）
ownerDocument:null (根元素節點)
## 獲取節點
document對象來獲取頁面有關的信息
<body>
<h1>我是標題</h1>
<script>
document.getElementById("myH1");//獲取節點
console.log(h1.id); // 元素的id
console.log(h1.className);// 元素的class
console.log(h1.innerHTML);// 元素的HTML文本
</script>
1. 使用該方法一定不要查找多個id
2. 如果有多個相同的id,則只會返回一個元素
3. 在低于IE 8 的版本，對匹配元素的ID不區分大小寫
var h1s =
document.getElementById("h1");
console.log(h1s);
for(var i = 0;i < h1s.length;i++){
console.log(h1s[i].id);//獲取id
console.log(h1s.item(i).id);//獲取id
console.log(h1s[i].id);//獲取id
}
該方法是根據標簽名稱來獲取元素節點
* 因為一個文檔中可能出現多個標簽
* 所以該方法返回的是多個Element組成的集合
* 盡量使用getElementById()
*
### NodeList 對象（NodeList: 節點列表）
類數組集合
* 返回的是一個只讀 類數組對象
* 他們擁有length屬性
* 也可以像數組一樣索引
## 獲取元素
寫from 標簽的時候
一個內容，如果多個用input表單
<body>
<from ..>
<input type=""name=""id=""value=""/>洗澡
<input type=""name=""id=""value=""/>喝水
<script ..>
var name =
document.getElementsByName("input_name");
for(var i = 0;i<name.length;i++){
console.log(names[i].value)
}
</script>
是通過標簽的name 屬性的值來獲取元素
可能出現多個相同的name值，
所以返回是一個Element 組成的集合
有嚴重的兼容性問題，
在IE中
## 獲取元素querySelector(CSS 的選擇器)
<title>Document</title>
</head>
<body>
<p id="demo"></p>
</body>
<script ..>
var p_1 = document。querySelector("#demo");
console.log(p_1);
對應一個選擇器,特別好用
### querySelector(CSS 的選擇器)
參數;
* CSS 選擇器
* 指定一個或者多個匹配的CSS 選擇器
* id，class，類型 屬性
* 返回值
<body>
</body>
<script>
var p_1 =
document.querySelector(".id")
### querySelectorAll()
返回所有匹配的元素
HTML5 中引入的
返回不是實時，返回的是調用時刻所匹配的內容
* ：hover、：visitited 去訪問到用戶的瀏覽器習慣等
* 很多瀏覽器會直接拒絕使用這個內容
<body>
快捷方式
</body>
<script..>
var all = document.querySelectorALL(".p_1");
console.log(all);
console.log(all.length);
console.log(all[1]);
### 6_Note 獲取操作
元素關系
1. 父元素
2. 子
3. 兄弟關系
4. 父子關系
1. 父節點 （parent)
* 父節點擁有任意數量的子節點
2. 子節點 （child）
3. 兄弟節點（sibling）
* 自己百度吧 有圖 節點操作
4. 根節點 （root）
* 根節點不可能有父節點
* 只能存在一個
* 一個文檔中的“源頭”
### 7_childNodes.html
childNodes
* 獲取一個元素的所有的子節點
* 返回值是一個數組
* 只獲取子節點，不能獲取到子節點的子節點
<body>
<div id="div">//獲取拓展時會再說，有問題，但可以看到
<a href="###">簡書</a>
</div>
div>
<a href="###">有道云</a>
</div>
div>
<a href="###">微博</a>
</div>
<script ..>
var nodes =
document.getElementById("div").childNodes;
console.log(nodes);
for(var i=0;i<nodes.length;i++){
console.log(nodes[i].n...
}
firstChild 屬性
* 獲取元素的第一個子節點
如果選定的節點沒有子節點，
則直接返回null
var div = document.getElementById("div");
//獲取第一個子節點
var firstChild = div.firstChild;
console.log(firstChild);
console.log(firstChilld.nodeName);
var lastChild=
可以寫函數判斷，也可以通過挪動下位置
## 8_parentNode 屬性
獲取一個元素的父節點
<body>
<div id="div">
<a href="###">搜狐</a>
<sc..>
var div = document.getElementById("div");
var node_1 = div.parentNode；
console.log(node_1)
....
圖面展示...
## previousSibling
獲取一個元素的上一個兄弟節點
var div1 =document.getElementById("div1");
var previousSibling = div1...
跟上一部分是相關的。
找到它的上一個兄弟。
## nextSibling
獲取一個元素的下一個兄弟節點
var nextSling = div1.nextSibling;
console.log(nextSibling)
拓展：
1. 獲取一個節點所在的文檔的根節點
元素節點名稱.ownerDocument
實際上相當于當前整個文檔節點
2. 獲取當前節點所有的屬性節點
元素節點名稱。attributes；
console.log(div1.attributes)
# 9_關于獲取元素的拓展（比較重要）
在IE 9 以下，當前內容通過alert()彈出當前
節點的 firstChild 實際上應該為 p
但是在現代瀏覽器中，比如 Chrome , FF iell 等等
將會<div> </div>之間的空白節點也解析出來
所以通過alert 彈出的 #text
因為空白節點也是屬于text 文本節點
但是如果將多個標簽中的空白內容刪除
在不同瀏覽器，來去解決這個問題
function getFirst(elem){
for(var i = 0,e; e = elem.chilNodes[i++];){
if(e.nodeType ==1){
return e;
}//做判斷
}
}
var first =
document.getElementsByTagName("div")[0];
console.log(first);
我們經常會選擇區用一個方法直接獲取父元素的
第一個節點，
DOM中直接拓展了一個新的方法
farstElementChild
console.log(farstElementChild);
但是，拓展的方法 farstElementChild
在現代瀏覽器中兼容，但是在IE6/7/8中
沒有該方法
一旦使用會報錯
children
不是標準屬性，返回指定元素的子元素集合
但是它只返回HTML節點，甚至不會返回文本節點
雖然不是標準DOM，但是和innerHTML，一樣，等到了幾乎所有瀏覽器支持
和childNodes 一樣，在Firefox 中不支持
直接
console.log(farst children[0]);
nextSibling --> farstElementChild
lastChild --> lastElementChild
nextSibling --> farstElementChild
previousSibling --> previousElementChild
## 修改：
1. 創建文本節點
createTextNode()
1. createTextNode(text)
創建文本節點
2. 添加一個child 元素 appendChild()
3. 創建一個新的元素節點createElement()
4. 在一個節點之前插入新的節點insertB..
5. 移除子節點
6. 替換子節點
7. 克隆節點
var textNode = document.createTextNode("謝聃");
console.log(textNode.nodeName);
console.log(textNode.nodeV..e);
appendChild(node)
參數：
* node
* 需要添加的節點
* 必選參數
* 返回值：
* 參數對象本身
* append翻譯過來是 追加
* 。。
var div = document.getElementById("div");
div.app..(textNode);
createElement(nodeName)
創建一個元素節點
* 參數：
* nodeName
* 需要創建元素的名稱
* 返回值：
* 創建的元素節點
var newElement = document.createElement("a");
insertBefore(newNode,existingNode)
在一個節點前面插入一個新的節點
參數：
* newNode
* 需要插入的新的節點
* 。。。。
* 目標節點
<div id= "div"></div>
<ul id="language">
<li>java</li>
<li>c#</li>
</ul>
<buttom onclick="此處填寫相應的英文（）"
<buttom onclick="cloneNode(deep)">克隆</buttom>
<sc..>
function addNode(){
var newItem=
document.createElement("li");
}
removeChild(node)
移除子節點
參數：
* node
* 必選參數
* 需要移除的子節點
function removeNode(){
var languageList = document.getElementById("language");
var li_List = languageList.getElementsByTagName("li");
console.log(li_List);
languageList.removeChild(li_List[0]);
console.log(li_List.length);
}
獲取相應的節點,然后在移除
調用，button 小按鈕 在上面的 <body>
function addNode(){
var newItem = document.createElement("li");
var textNode_2 = document.createTextNode("JavaScript");
newItem.appendChild(textNode_2);
var languageList = document.getElementById("language");
//將 newItem 添加到 language 列表中
languageList.insertBefore(newItem,languageList.firstChild);
}
替換子節點
replaceChild(newNode,oldNode)
參數
* newNode
* 新節點
* oldNode
* 舊節點
function replaceNode(){
var languageList = document.getElementById("language");
var newLi = document.createElement("li");
newLi.innerHTML = "NodeJS";
//使用新的節點替換舊的節點
languageList.replaceChild(newLi,languageList.childNodes[0]);
}
克隆節點
cloneNode(deep)
* 該方法可以用于創建指定的節點的精確拷貝
* 拷貝所有的屬性和屬性值
該方法將賦值并返回它的節點的副本
function cloneNode(){
var languageList =
documment.getElementById("language");
var newList.cloneNode(ture)
}
完整代碼
function cloneNode(){
var languageList = document.getElementById("language");
//克隆整個 languageList 節點
//傳入的參數如果為 true
//則代表深拷貝
//所有的子節點都 copy 下來
var newList = languageList.cloneNode(true);
document.getElementsByTagName("body")[0].appendChild(newList);
}
## 元素屬性操作
### 1. 獲取屬性值 getAttibute()
attributName
* 獲取元素的某個屬性名稱
* id、classname
* 返回值：
* 獲取指定屬性的屬性值
<body>
<a href="http://www.baidu.com" id = "a_id"
target=""
<sc..>
function getShuXing(){
var a = document.getElementById("a_id");
console.log("id = " + a.getAttribute("id") + "\ntarget = " + a.getAttribute("target"));
}
### 2. 設置屬性值 setAttibute()
作用：
* 創建或者更改某個值
* 如果存在，則設置該值就可
* 不存在，則創建該屬性并設置該屬性值
function setShuXin(){
var a = document.getElementById("a_id");
a.setAttribute("href","http://www.yztcedu.com");
}
將百度已換成育知同創
### 3. 移除屬性值.. retAttibute()
AttributName
* 必選參數
* 需要移除的屬性名稱
function removeShuXin(){
var a = document.getElementById("a_id");
a.removeAttribute("target");
}
### 4. 檢查是否包含某個屬性 hasAttribute()
hasAttribute()
* 檢查是否包含某個屬性
去前面方法的需要檢查的名稱
返回值為ture/false
判斷
console.log(document.getElementById("a_id").hasAttribute("target"));
如果操作中包含來自其他空間屬性的XML文檔的時候，在當前四個方法后面+NS（命名空間）
四個方法的空間版