abstrak：什么是DOM？1.文檔對(duì)象模型2.可操作的HTML/XML文檔3.HTML中的DOM樹4.文檔節(jié)點(diǎn)，即node類型，每個(gè)節(jié)點(diǎn)都是node節(jié)點(diǎn)對(duì)象。如何選擇元素？1. <div id="item1"></div>let item1 = document.getElementById('item1');let 聲明 item1 變
什么是DOM？
1.文檔對(duì)象模型
2.可操作的HTML/XML文檔
3.HTML中的DOM樹
4.文檔節(jié)點(diǎn)，即node類型，每個(gè)節(jié)點(diǎn)都是node節(jié)點(diǎn)對(duì)象。
如何選擇元素？
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]是相當(dāng)于數(shù)組下標(biāo)，dom皆為
數(shù)組，也就是說每個(gè)dom都是數(shù)組集合！
3. <span>標(biāo)簽選擇器</span>
let oSpan = document.getElementsByTagName('span')[0];
通過san標(biāo)簽名稱的選擇器
4. <p class="plus"></p>
let large = document.getElementsByClassName('plus')[0];
（1-4）種控制css屬性操作基本相同
方法一 以1.為例子 ：item1.style.background = "green";//設(shè)置綠色背景
方法二 item1.style.cssText="color:green;background:cyan";//設(shè)置背景色和顏色
5. css選擇器來選擇;
<ul id="ul"><li class="green"></li></ul>
//我們選擇頁面元素的時(shí)候,大多使用css選擇器來獲取元素,例如
// .red 獲取 class="green"的元素,其實(shí)js也支持使用css選擇器獲取元素
let lists = document.querySelectorAll('li');
//獲取lists[0]數(shù)組下標(biāo)0，將其設(shè)置背景色
lists[0].style.backgroundColor = 'coral';
//獲取到lists[1]數(shù)組下標(biāo)1設(shè)置顏色也就是說第二個(gè)li將設(shè)置背景色
lists.item(1).style.backgroundColor = 'lightblue';
//該方法還可以在元素上調(diào)用,這也根據(jù)標(biāo)簽和class類名獲取元素是一樣的
let ul = document.querySelector('#ul'); // 獲取滿足條件的第一個(gè)元素
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()">點(diǎn)我</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>項(xiàng)目1</li><li>項(xiàng)目2</li><li>項(xiàng)目3</li></ul>
<p id="demo">您將刪除當(dāng)前項(xiàng)目哦</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">點(diǎn)擊按鈕來替換列表中的首個(gè)項(xiàng)目。</p>
<button onclick="myFunction()">試一下</button>
function myFunction()
{
var textnode=document.createTextNode("恭喜您更新成功！");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
Guru membetulkan：韋小寶Masa pembetulan：2019-01-09 09:29:13
Rumusan guru：js對(duì)dom的操作還是很好玩的 , 甚至可以自己做一些動(dòng)畫 , 想要使用js來完成dom操作最重要的還是對(duì)選擇器的掌握