1.选择符
querySelector() ：返回匹配的第一个元素，可以是ID、类名、标签名
querySelectorAll()：返回所有匹配的元素组成的 NodeList
<div class="hello">hello</div>
<p class="world ap">world</p>
<a href="">baidu</a>
<a href="">google</a>
<script>
var helloBox = document.querySelector(".hello");
console.log(helloBox.innerHTML); // hello
var aTag = document.querySelectorAll("a");
console.log(aTag); // NodeList(2) [a.link, a.link]
</script>2.元素遍历
childElementCount：返回子元素个数（不包括文本节点和注释）
firstElementChild/lastElementChild：返回第一个/最后一个子元素
previousElementSibling/nextElementSibliing：返回前一个/后一个同胞元素
console.log(document.body.childElementCount); // 5
var worldBox = document.querySelector(".world");
console.log(worldBox.previousElementSibling.innerHTML); // hello可以组合几个属性避开文本节点和注释来遍历元素
var i, len,
child = document.body.firstElementChild;
while (child != document.body.lastElementChild){
// 处理child
child = child.nextElementSibling;
}children：返回元素所有子元素节点
contains()：元素是否包含另一个元素
3.HTML5
1.getElementsByClassName()：通过类名查询
var eles = document.getElementsByClassName("world ap");
console.log(eles); //HTMLCollection [p.world.ap]classList：可操作节点的类，有add、contains、remove、toggle等方法，浏览器支持不广泛
2.activeElement：焦点管理，文档加载期间返回null，文档加载完成后返回 <body> 标签
var btn = document.querySelector(".btn");
btn.focus();
console.log(document.activeElement == btn); // true3.HTMLDocument状态变化
readyState：返回 loading/complete
console.log(document.readyState); // loadingcompatMode：返回浏览器渲染模式 ，标准模式返回 “CSS1Compat”，混杂模式返回 “BackCompat”
<!DOCTYPE html>
.
.
.
console.log(document.compatMode); // CSS1Compat<!--<!DOCTYPE html>-->
.
.
.
console.log(document.compatMode); // BackCompathead：返回<head>元素
body：返回<body>元素
4.字符集属性
charset：实际使用的字符集
console.log(document.charset); // UTF-85.自定义数据属性
标签前缀带有 data- 的属性，dataset 为保存了元素自定义数据属性的键值对集合
6.插入标记
innerHTML：元素所有子节点
outerHTML：元素及所有子节点
7.插入文本
innerText：返回元素中所有文本
outerText：当读取元素文本时，和innerText作用相同，当要写入时将以文本节点完全替代当前元素
扫一扫
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
