abstrait：什么是DOM？1.文檔對象模型2.可操作的HTML/XML文檔3.HTML中的DOM樹4.文檔節(jié)點，即node類型，每個節(jié)點都是node節(jié)點對象。如何選擇元素？1. <div id="item1"></div>let item1 = document.getElementById('item1');let 聲明 item1 變
什么是DOM？
1.文檔對象模型
2.可操作的HTML/XML文檔
3.HTML中的DOM樹
4.文檔節(jié)點，即node類型，每個節(jié)點都是node節(jié)點對象。
如何選擇元素？
1. <div id="item1"></div>
let item1 = document.getElementById('item1');
let 聲明 item1 變量名 = 獲取ID屬性選擇器;
2. <input type="text" name="login">
let login = document.getElementsByName('login')[0];
獲取元素的name屬性選擇，那么這里[0]是相當于數組下標，dom皆為
數組，也就是說每個dom都是數組集合！
3. <span>標簽選擇器</span>
let oSpan = document.getElementsByTagName('span')[0];
通過san標簽名稱的選擇器
4. <p class="plus"></p>
let large = document.getElementsByClassName('plus')[0];
（1-4）種控制css屬性操作基本相同
方法一 以1.為例子 ：item1.style.background = "green";//設置綠色背景
方法二 item1.style.cssText="color:green;background:cyan";//設置背景色和顏色
5. css選擇器來選擇;
<ul id="ul"><li class="green"></li></ul>
//我們選擇頁面元素的時候,大多使用css選擇器來獲取元素,例如
// .red 獲取 class="green"的元素,其實js也支持使用css選擇器獲取元素
let lists = document.querySelectorAll('li');
//獲取lists[0]數組下標0，將其設置背景色
lists[0].style.backgroundColor = 'coral';
//獲取到lists[1]數組下標1設置顏色也就是說第二個li將設置背景色
lists.item(1).style.backgroundColor = 'lightblue';
//該方法還可以在元素上調用,這也根據標簽和class類名獲取元素是一樣的
let ul = document.querySelector('#ul'); // 獲取滿足條件的第一個元素
let li = ul.querySelectorAll('.green');
for (let i = 0; i < li.length; i++) {
li[i].style.backgroundColor = 'green';
}
創(chuàng)建dom：
<p id="demo">單擊按鈕創(chuàng)建button元素</p>
<button onclick="myFunction()">點我</button>
function myFunction(){
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
};
插入dom:
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">插入dom元素</p>
<button onclick="myFunction()">插入</button>
function myFunction(){
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
刪除dom:
<ul id="myList"><li>項目1</li><li>項目2</li><li>項目3</li></ul>
<p id="demo">您將刪除當前項目哦</p>
<button onclick="myFunction()">試一下</button>
function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
更新dom：
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">點擊按鈕來替換列表中的首個項目。</p>
<button onclick="myFunction()">試一下</button>
function myFunction()
{
var textnode=document.createTextNode("恭喜您更新成功！");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
Professeur correcteur：韋小寶Temps de correction：2019-01-09 09:29:13
Résumé du professeur：js對dom的操作還是很好玩的 , 甚至可以自己做一些動畫 , 想要使用js來完成dom操作最重要的還是對選擇器的掌握