Dom-直接 /間接選擇器
阿新 • • 發佈：2017-08-25
prev children nts blue html轉換 文本 title png 1.3
Dom:Document Object Model的縮寫， 把html轉換成了文本對象.
1. 直接選擇器
1、直接查找 document.getElementById 根據ID獲取一個標簽 document.getElementsByName 根據name屬性獲取標簽集合 document.getElementsByClassName 根據class屬性獲取標簽集合 document.getElementsByTagName 根據標簽名獲取標簽集合
1. 找到標簽
document.getElementById(‘i1‘) 獲取單個元素
document.getElementsByTagName(‘div‘) 獲取多個元素（列表）
document.getElementsByClassName(‘c1‘) 獲取多個元素（列表）
document.getElementsByName
2. 操作標簽
獲取標簽中的文本內容 innertext
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">我是i1</div>
<a>909</a>
<a>我是中國人</a>
<a>sdfdfd</a>
</body>
</html>
運行：
document.getElementById(‘i1‘)
<div id=?"i1">?我是i1?</div>?
document.getElementById(‘i1‘).innerText
"我是i1"
document.getElementById(‘i1‘).innerText=‘新內容‘
"新內容"
document.getElementsByTagName(‘a‘)
(3) [a, a, a]
document.getElementsByTagName(‘a‘)[1]
<a>?我是中國人?</a>?
document.getElementsByTagName(‘a‘)[1].innerText=‘I am Chinese‘
"I am Chinese"
tags=document.getElementsByTagName(‘a‘)
(3) [a, a, a]
for(var i=0;i<tags.length;i++){tags[i].innerText=888;}
888
2. 間接選擇器
2、間接查找 parentNode // 父節點 childNodes // 所有子節點 firstChild // 第一個子節點 lastChild // 最後一個子節點 nextSibling // 下一個兄弟節點 previousSibling // 上一個兄弟節點 parentElement // 父節點標簽元素 children // 所有子標簽 firstElementChild // 第一個子標簽元素 lastElementChild // 最後一個子標簽元素 nextElementtSibling // 下一個兄弟標簽元素 previousElementSibling // 上一個兄弟標簽元素
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div></div>
<div>c1</div>
</div>
<div>
<div></div>
<div id="i1">c2</div>
</div>
<div>
<div></div>
<div>c3</div>
</div>
</body>
</html>
運行結果：
tag=document.getElementById(‘i1‘) <div id=?"i1">?c2?</div>? tag.parentElement <div>?<div>?</div>?<div id=?"i1">?c2?</div>?</div>? tag.parentElement.children (2) [div, div#i1, i1: div#i1]i1: div#i1length: 20: div1: div#i1__proto__: HTMLCollection tag.parentElement.previousElementSibling <div>?<div>?</div>?<div>?c1?</div>?</div>?
3. 操作標簽：
A-innerText: 獲取標簽中的文本內容， tag.innerText=" "
B-className:
tag.className: 直接整體做操作
tag.classList.add(‘樣式名‘) 添加指定樣式
tag.classList.remove(‘樣式名‘) 刪除指定樣式
C-如下，點擊的功能。
<div onclick=‘func()‘;>點我</div>
<script>
function func(){
}
</script>
4. 來個完整示例-----模態對話框。
z-index： 誰的值最大，誰就在最上面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none
}
.c1{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color:black;
opacity:0.6;
z-index:9;
}
.c2{
width:500px;
height:400px;
background-color:white;
position:fixed;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-200px;
z-index:10;
}
</style>
</head>
<body style="margin:0;">
<div>
<input type="button" value="添加" onclick="ShowModel();"/>
<table border="1px solid blue">
<thead>
<tr>
<th>主機名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>191</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div>
<!--遮罩層開始-->
<div id="i1" class="c1 hide"></div>
<!--遮罩層結束-->
<!--彈出框開始-->
<div id="i2" class="c2 hide">
<p><input type="text"/></p>
<p><input type="text"/></p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="確定">
</p>
</div>
<!--彈出框結束-->
<script>
function ShowModel(){
document.getElementById(‘i1‘).classList.remove(‘hide‘);
document.getElementById(‘i2‘).classList.remove(‘hide‘);
}
function HideModel(){
document.getElementById(‘i1‘).classList.add(‘hide‘);
document.getElementById(‘i2‘).classList.add(‘hide‘);
}
</script>
</body>
</html>
運行結果：
點擊取消後，對話框消失。
Dom-直接 /間接選擇器