JavaScript應用中的document選擇器：直接選擇、間接選擇。
1、直接查找：
document.getElementById 根據ID獲取一個標簽 document.getElementsByName 根據name屬性獲取標簽集合 document.getElementsByClassName 根據class屬性獲取標簽集合 document.getElementsByTagName 根據標簽名獲取標簽集合
直接找到對應的div標簽中的文本內容：
如：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">我是i1</div>
<div>新內容
<a>A</a>
<a>B</a>
</div>
<div>chen1</div>
<div>chen2</div>
<div>chen3</div>
</body>
</html>
A、找到div 中，‘我是i1’ 的內容。 根據定義的ID進行查找，document.getElementById('i1')，再接上innerText，打印標簽的內容。='chen1203' 進行內容顯示替換。
B、把 A B內容截取出來
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>
c3
</div>
</div>
</body>
</html>
根據標簽中內容找到C3信息，操作如下：
tags = document.getElementById('i1')
tags.parentElement
tags.nextElementSibling
tags.nextElementSibling.getElementsByTagName('div')[0]
tags.nextElementSibling.getElementsByTagName('div')[0].innerText
先找到 ID為i1做為參照物，在通過相鄰，上下的標簽做調整。
3、標簽操作：
A、獲取標簽信息
innerText 文本 outerText innerHTML HTML內容 innerHTML value 值
B、屬性
attributes // 獲取所有標簽屬性
setAttribute(key,value) // 設置標簽屬性
getAttribute(key) // 獲取指定標簽屬性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
C、class操作
className // 獲取所有類名 classList.remove(cls) // 刪除指定類 classList.add(cls) // 添加類
D、標簽操作
(1)、創建標簽
// 方式一
var tag = document.createElement('a')
tag.innerText = "chen1203"
tag.className = "c1"
tag.href = "http://www.baidu.com"
//方式二
var tag = "<a class='c1' href='http://www.baidu.com'>chen1203</a>"
（2）、操作標簽
// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
E、樣式操作
替換樣式
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
F、提交表單
document.geElementById('form').submit()
G、其他操作
console.log 輸出框 alert 彈出框 confirm 確認框 // URL和刷新 location.href 獲取URL location.href = "url" 重定向 location.reload() 重新加載 // 定時器 setInterval 多次定時器 clearInterval 清除多次定時器 setTimeout 單次定時器 clearTimeout 清除單次定時器
舉例：（跑馬燈）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- -->
<div id="i1">12321</div>
<script>
function func() {
// 根據ID獲取指定標簽的內容，定於局部變量接收
var tag = document.getElementById('i1');
//獲取標簽內部的內容
var content = tag.innerText;
var f = content.charAt(0)
var l = content.substring(1,content.length)
var new_content = l + f;
tag.innerText = new_content;
}
setInterval('func()',1000)
</script>
</body>
</html>