JavaScript-4.3-BOM 與 DOM-Core DOM
- Core DOM
- 一：DOM 樹結構分析
- 二：操作元素節點
- 1、getElementById
- 2、getElementsByName / getElementsTagName / getElementsClassName
- 3、document.querySelector / querySelectorAll
- 三：操作文本節點
- 四：操作屬性節點
- 五：JavaScript 修改元素樣式
- 六：獲取層次節點
- 1、childNodes / children
- 2、firstChild / firstElementChild
- 3、lastChild / lastElementChild
- 4、parentNode
- 5、previousSibling / previousElementSibling
- 6、nextSibling / nextElementSibling
- 7、attributes
- 七：創建新節點
- 八：刪除/替換節點
Core DOM
- 文檔對象模型（DOM）是萬維網聯盟（W3C）的標準
- DOM 定義了訪問 HTML和 XML 文檔的標準
- W3C DOM 是中立於平臺和語言接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式
W3C DOM 標準分爲三個不同的部分
1.Core DOM 是核心 DOM，定義了一套標準的針對任何結構化文檔的對象，包括 HTML、XHTML 和 XML。核心 DOM 適合操作節點，如創建、刪除、查找
2.XML DOM 定義了所有 XML 元素的對象的屬性，以及訪問它們的方法
3.HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。HTML DOM 適合操作屬性，如讀取或修改屬性的值
- 當網頁被加載時，瀏覽器會創建頁面的文檔對象模型
- Document 對象使用戶可以從腳本中對 HTML 頁面中的所有元素進行訪問
- Document 對象是 window 對象的一部分，可通過 window.document 屬性對其進行訪問
一：DOM 樹結構分析
- 通過 getElement 系列方法，可以取到元素節點
DOM 節點分爲三大類
1.元素節點：又叫標籤節點，指文檔中的各種 HTML 標籤
2.文檔節點：標籤中的文字
3.屬性節點：標籤的屬性
二：操作元素節點
- 在 DOM 操作中，操作元素節點是最基礎的一步，使用 HTML 操作任何內容都需要選中一個標籤，才能對標籤以及標籤的文字、屬性、樣式進行修改
1、getElementById
- 在操作文檔的一個特定的元素時，最好給該元素一個 id 屬性，爲它指定一個（在文檔中）唯一的名稱，然後就可以用此 id 查找想要的元素
<body>
<div id="box">div文字</div>
</body>
<script>
var divById = getElementById("box")
</script>
注意：
通過 id 獲取唯一的節點，如果存在多個同名 id，則只會選取第一個
2、getElementsByName / getElementsTagName / getElementsClassName
- 通過 Name、TagName、ClassName 取到一個數組，包含多個節點
- 使用方法，通過循環取到每一個節點，而循環的次數是從0開始，直到數組的最大長度後結束
<body>
<div name="div1" id="div2">div文字</div>
</body>
<script>
var divByName = getElemenstByName("div1")
var divByTagName = getElementsTagName("div")
var divByClassName = getElemetsClassName("div2")
</script>
3、document.querySelector / querySelectorAll
- querySelector() 方法僅僅返回匹配指定 CSS 選中器的第一個元素
- 如果需要返回所有的元素，則使用 querySelectorAll() 方法替代
<body>
<div id="demo">div文字</div>
</body>
<script>
// 獲取文檔中 id="demo" 的元素
document.querySelector("#demo")
</script>
注意
1.圓括號"()"中傳入參數指定一個或多個匹配元素的 CSS 選擇器
2.可以使用它們的 id、類、類型、屬性、屬性值等來選取元素
3.對於多個選擇器，使用逗號隔開，返回一個匹配的元素
三：操作文本節點
- 在 DOM 操作中，操作元素節點取到標籤節點後，接下倆就可以通過 JavaScript 中提供的方法對標籤中的文字進行獲取、修改操作
iinnerHTML和innerText的區別
1.innerHTML 指的是從對象的起始位置到終止位置的全部內容，包括 HTML 標籤
2.innerText 指的是從起始位置到終止位置的內容，但它去除 HTML 標籤
3.innerText 只適用於 IE 瀏覽器（現在也適應 Chrome 瀏覽器），而 innerHTML 是符合W3C 標準的屬性。儘可能使用 innerHTML,而少用 innerText
1、tagName
- tagName 屬性返回元素的標籤名，即獲取節點標籤名
- 在 HTML 中，tagName 屬性的返回值始終是大寫字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tagName</title>
</head>
<body>
<div id="div"></div>
<button id="btn">點擊有驚喜</button>
</body>
<script type="text/javascript">
// 獲取元素節點
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.onclick = function(){ // 點擊按鈕彈出對話框
alert(div.tagName);
}
</script>
</html>
效果動態圖
2、innerHTML
- innerHTML 屬性設置或返回表格行的開始和結束標籤之間的 HTML，即設置或者獲取節點內部的所有 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHTML</title>
</head>
<body>
<div id="div"></div>
<button id="btn">點擊有驚喜</button>
</body>
<script type="text/javascript">
// 獲取元素節點
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.onclick = function(){ // 點擊按鈕彈出對話框
div.innerHTML = "<h1>星期五</h1>"
alert(div.innerHTML);
}
/*
代碼執行時，單擊按鈕後首先執行的是 alter 彈窗
彈窗中顯示內容爲“<h1>星期五</h1>”，即代碼中設置的 innerHTML 中的內容
單擊確定按鈕後，頁面 <div> 中的內容顯示爲 <h1> 標籤中的內容
*/
</script>
</html>
效果動態圖
3、innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerText</title>
</head>
<body>
<div id="div">嘻嘻嘻</div>
<button id="btn">點擊有驚喜</button>
</body>
<script type="text/javascript">
// 獲取元素節點
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.onclick = function(){ // 點擊按鈕彈出對話框
div.innerHTML = "星期五"
alert(div.innerHTML);
}
</script>
</html>
效果動態圖
四：操作屬性節點
1、查看屬性節點
- getAttribute() 方法返回指定屬性名的屬性值
getAttribute('屬性名');
2、設置屬性節點
- setAttribute() 方法添加指定的屬性，併爲其賦指定的值
- 如果這個指定屬性已存在，則僅設置或更改屬性值
setAttribute("屬性名","屬性值");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作屬性節點</title>
</head>
<body>
<button id="div1">取到 a 的 href 屬性值</button>
<button id="div2">修改 a 的 href 屬性值</button>
<a href="http://www.4399.com" id="a1">超鏈接</a>
</body>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var a1 = document.getElementById('a1');
div1.onclick = function(){
alert(a1.getAttribute('href'));
console.log(a1.href);
}
div2.onclick = function(){
a1.setAttribute("href","http://www.7k7k.com");
console.log(a1.href);
}
</script>
</html>
效果動態圖
五：JavaScript 修改元素樣式
1、className
- 使用 className 直接設置 class 類，爲元素設置一個新的 class 名字
// 基本語法
div.styleName="div1";
2、style
- 使用 style 設置單個屬性，爲元素設置一個新的樣式，注意屬性名要使用小駝峯命名法則
// 基本語法
div.style.background-color="red";
3、style.cssText
- style.cssText 爲元素同時修改多個樣式
- 使用 style 或 style.cssText 可以同時設置多個樣式屬性
// 基本語法
div.style="background-color:red;color:yellow";
div.style.cssText="background-color:red;color:yellow";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 修改元素樣式</title>
<style type="text/css">
.div1{
font-size: 50px;
}
.div2{
font-size:16px;
}
</style>
</head>
<body>
<button id="btn1">通過 className 修改字號</button>
<button id="btn2">通過 style 修改字號</button>
<button id="btn3">通過 style.cssText 修改字號</button>
<div id="div1" class="div1" name="div1">div文字</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var div1 = document.getElementById("div1");
// 通過 className 修改字號
btn1.onclick = function(){
div1.className="div2";
}
// 通過 style 修改字號
btn2.onclick = function(){
div1.style.fontSize = "30px";
}
// 通過 style.cssText 修改字號
btn3.onclick = function(){
div1.style.cssText = "font-size:50px";
}
</script>
</html>
效果動態圖
注意
在使用 style 和 style.cssText 修改樣式時，需要注意這兩種方式都是通過給元素添加行內樣式來實現樣式修改的，如果要再進行修改也只能使用行內樣式修改
六：獲取層次節點
- 文檔中所有節點相互之間都有關係，包括父子關係、同胞關係
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取層次節點</title>
</head>
<body>
<div id="box">
第一個 div 標籤
<p id="p" title="p標籤">第一個 p 標籤</p>
<ul>
<li>第一個 li 標籤</li>
<li>第二個 li 標籤</li>
<li>第三個 li 標籤</li>
</ul>
<p>
第二個 p 標籤
<span>第一個 span 標籤</span>
</p>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
// 1、獲取元素的所有子節點
var childs = box.childNodes;
var child = box.children;
console.log(childs);
console.log(child);
// 2、獲取元素的第一個子節點
var firsts = box.firstChild;
var first = box.firstElementChild;
console.log(firsts);
console.log(first);
// 3、獲取元素的最後一個子節點
var lasts = box.lastChild;
var last = box.lastElementChild;
console.log(lasts);
console.log(last);
// 4、獲取當前節點的父節點
var parent = box.parentNode;
console.log(parent);
// 5、獲取當前節點的前一個兄弟節點
var previous = box.previousSibling;
var previou = box.previousElementSibling;
console.log(previous);
console.log(previou);
// 6、獲取當前節點的後一個兄弟節點
var nexts = box.nextSibling;
var next = box.nextElementSibling;
console.log(nexts);
console.log(next);
// 7、獲取當前元素節點的所有屬性節點
var p = document.getElementById("p");
var attrs = p.attributes;
console.log(attrs);
</script>
</html>
1、childNodes / children
- childNodes：獲取元素的所有子節點，包括按 Enter 鍵換行等文本節點，結果爲數組
- children：獲取元素的所有元素節點，不包括 Enter 鍵換行等文本節點，結果爲數組
效果圖
![在這裏插入圖片描述]()
2、firstChild / firstElementChild
- firstChild：獲取元素的第一個子節點，包括按 Enter 鍵換行等文本節點；如果存在子元素，則返回第一個元素，否則返回 null
- firstElementChild：獲取元素的第一個子節點，不包括 Enter 鍵換行等文本節點；如果沒有元素子節點，則返回 null
效果圖
![在這裏插入圖片描述]()
3、lastChild / lastElementChild
- lastChild：獲取元素的最後一個子節點，包括 Enter 鍵換行等文本節點
- lastElementChild：獲取元素的最後一個子節點，不包括 Enter 鍵換行等文本節點
效果圖
![在這裏插入圖片描述]()
4、parentNode
- 獲取當前節點的父節點
效果圖
![在這裏插入圖片描述]()
5、previousSibling / previousElementSibling
- previousSibling：獲取當前節點的前一個兄弟節點，包括 Enter 鍵換行等文本節點
- previousElementSibling：獲取當前節點的前一個兄弟節點，不包括 Enter 鍵換行等文本節點
效果圖
![在這裏插入圖片描述]()
6、nextSibling / nextElementSibling
- nextSibling：獲取當前節點後一個兄弟節點，包括 Enter 鍵換行等文本節點
- nextElementSibling：獲取當前節點後一個兄弟節點，不包括 Enter 鍵換行等文本節點
效果圖
![在這裏插入圖片描述]()
7、attributes
- attributes：獲取當前元素節點的所有屬性節點
效果圖
![在這裏插入圖片描述]()
七：創建新節點
- 在進行 DOM 操作時，創建新結點（元素）是必不可少的步驟，因爲操作 DOM 的基礎就是先獲得標籤節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>創建新節點</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#div1{
height:50px;
background-color:#0ff;
}
</style>
</head>
<body>
<ul id="ul1">
<li>第一項</li>
<li>第二項</li>
</ul>
<div id="div1"></div>
<button id="btn1">在文檔最後插入一張圖片</button>
<button id="btn2">在 ul 和 div 之間插入一張圖片</button>
<button id="btn3">複製一個 ul</button>
</body>
<script type="text/javascript">
var img = document.createElement("img"); // 創建一個圖片節點
var btn1 = document.getElementById("btn1"); // 獲取 btn1 節點
var btn2 = document.getElementById("btn2"); // 獲取 btn2 節點
var div1 = document.getElementById("div1"); // 獲取 div1 節點
var btn3 = document.getElementById("btn3"); // 獲取 btn3 節點
var ul1 = document.getElementById("ul1"); // 獲取 ul1 節點
btn1.onclick = function(){
img.setAttribute("src","1.jpg"); // 給 img 節點設置屬性
document.body.appendChild(img); // 在文檔最後插入一張圖片
}
btn2.onclick = function(){
img.setAttribute("src","2.jpg"); // 給 img 節點設置屬性
document.body.insertBefore(img,div1); // 在 ul 和 div 之間插入一張
}
btn3.onclick = function(){
var ulClone = ul1.cloneNode(true); // 複製 ul 的所有子節點
document.body.insertBefore(ulClone,div1); // 在 div1 之前複製 ul
}
</script>
</html>
效果動態圖
1、createElement(“標籤名”)
- 創建一個新的節點，需要配合 setAttribute()方法給新節點設置相關屬性
var img = document,createElement("img"); // 創建一個 img 節點
img.setAttribute("src","1.jpg"); // 給 img 節點設置屬性值
2、appendChild(“節點名”)
- appendChild() 方法可向節點的子節點列表的末尾添加新的子節點，即在某元素的最後追加一個新節點
document.body.appendChild(img); // 將設置好的 img 節點追加到 body 最後
3、insertBefore(新節點名，目標節點名)
- 將新節點插入到目標節點之前
document.body.insertfore(img,div1); // 將設置好的 img 節點插到 div1 之前
4、cloneNode(true/false)
- cloneNode 的作用是複製節點，需要複製哪個節點，就用哪個節點去調用被複制對象
- 傳遞參數爲
- true：表示複製當前節點及所有子節點
- false：表示只複製當前節點，不復制子節點（默認）
八：刪除/替換節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除/替換節點</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#div1{
height:50px;
background-color:#0ff;
}
</style>
</head>
<body>
<ul id="ul1">
<li>第一項</li>
<li>第二項</li>
</ul>
<div id="div1"></div>
<button id="btn1">刪除 ul</button>
<button id="btn2">新建 div 替換 ul</button>
</body>
<script type="text/javascript">
btn1.onclick = function(){
var btn1 = document.getElementById("btn1"); // 獲取 btn1 節點
var ul1 = document.getElementById("ul1"); // 獲取 ul1 節點
if(ul1){
document.body.removeChild(ul1); // 刪除 ul 節點
}else{
alert("ul 已經被刪除");
}
}
btn2.onclick = function(){
var btn2 = document.getElementById("btn2"); // 獲取 btn2 節點
var div2 = document.createElement("div"); // 創建一個 div 節點
var ul1 = document.getElementById("ul1"); // 獲取 ul1 節點
div2.setAttribute("style","width:100%;height:30px;background-color:#ff0;");
if(ul1){
document.body.replaceChild(div2,ul1); // 使用 div2 替換掉 ul1
}else{
alert("ul 已經被刪除");
}
}
</script>
</html>
效果動態圖
1、removeChild(需刪除節點)
- removeChild() 方法指定元素的某個指定的子節點，並從父容器中刪除指定節點
- 以 Node 對象返回被刪除的節點，如果節點不存在則返回 null
document.body.removeChild(ul); // 從ul的父容器 body 中刪除 ul 節點
2、replaceChild(新節點，被替換節點)
- 用新節點替換指定節點
document.body.replaceChild(newDiv,oldDiv); // 使用 newDiv 替換掉 oldDiv