1、选择符API
-
querySelector()接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配元素，则返回null
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>
var myDiv = document.querySelector(".myDiv"); //通过Document调用该方法，在文档元素范围内查找
console.log(myDiv.innerHTML); //1
<ul id="myList">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
var ul = document.getElementById("myList");
var li = ul.querySelector(".item"); //通过Element类型调用只在其后代元素范围内查找
console.log(li.innerHTML); //1
-
querySelectorAll()接收的参数与querySelector()一样，只是返回的是所有匹配元素，返回一个NodeList实例
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>
var myDiv = document.querySelectorAll(".myDiv");
console.log(myDiv.length); //3
console.log(myDiv[2].innerHTML); //3
<ul id="myList">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
var ul = document.getElementById("myList");
var li = ul.querySelectorAll(".item");
console.log(li.length); //3
console.log(li[1].innerHTML); //2
2、通过类名获取getElementsByClassName()
<ul id="myList">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
var lis = document.getElementsByClassName('item'); //接收一个参数，表示类名的字符串
console.log(lis.length); //3
3、插入标记innerHTML属性
读模式下，innerHTML属性返回与调用元素子节点对应的HTML标记；写模式下，innerHTML属性根据指定值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点
<ul id="myList">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
var myList = document.getElementById('myList');
var myListInnerHTML = myList.innerHTML;
console.log(myListInnerHTML);
//返回字符串
//<li class="item">1</li>
//<li class="item">2</li>
//<li class="item">3</li>
var myList = document.getElementById('myList');
myList.innerHTML = '<li class="item">3</li>';
console.log(myList.innerHTML); //<li class="item">3</li>，写模式下，重新设置
myList.innerHTML = "hello world";
console.log(myList.innerHTML); //hello world，如果设置的是纯文本，那结果就是设置纯文本
4、children属性
由于IE9之前的版本和其他浏览器处理文本节点中的空白符有差异，因此出现了children属性
<ul id="myList">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
var myList = document.getElementById('myList');
console.log(myList.children); //返回3个li元素节点
console.log(myList.childNodes); //返回除li元素节点外还有文本节点
5、插入文本
通过innerText属性可以直接操作元素中包含的文本内容，包括子文档树文本；通过该属性读取值时，会将子文档树中的文本拼接起来；写入值时，结果会删除所有子节点，插入包含相应文本值的文本节点
<ul id="myList">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
var myList = document.getElementById('myList');
console.log(myList.innerText);
//返回
//1
//2
//3
var myList = document.getElementById('myList');
myList.innerText = "hello";
console.log(myList.innerText); //hello；设置该属性前会移除所有先前的子节点
6、样式
在HTML中定义样式的方式有3种：通过<link>元素包含外部样式表文件、使用<style>元素定义嵌入样式、用style特性定义针对特定元素的样式；任何支持style特性的HTML元素在JS中都有一个对应的style属性，但仅包含通过style特性指定的所有样式信息，不包含外部样式表和嵌入样式表的样式
<div id="myBox"></div>
var myBox = document.getElementById('myBox');
myBox.style.width = '100px';
myBox.style.height = '100px';
//标准模式要求所有度量值都必须指定单位，混杂模式下可直接写成'100'，浏览器会假设为'100px'，但这种写法标准模式会因没有度量单位而直接忽略
myBox.style.backgroundColor = 'red';
//CSS属性中类似background-color这种带短横线写法的属性，需将其转换为驼峰大小写形式
7、元素大小
元素的可见大小由高度、宽度决定，包括所有内边距、滚动条和边框，不包括外边距
- 偏移量（只读属性）：
offsetHeight、offsetWidth指的是元素分别在垂直和水平方向上占用空间大小（即可见大小），以像素计；offsetTop、offsetLeft表示元素边框至包含元素内边框之间的像素距离
<div id="myBox"></div>
var myBox = document.getElementById('myBox');
myBox.style.width = '100px';
myBox.style.height = '100px';
myBox.style.backgroundColor = 'red';
console.log(myBox.offsetHeight); //100
console.log(myBox.offsetLeft); //8
- 客户区大小（只读属性）：指元素内容及其内边距所占据的空间大小，相关属性是
clientWidth、clientHeight，滚动条占用空间不计算在内
//浏览器视口大小
document.body.clientWidth
document.body.clientHeight
- 滚动大小
滚动大小指的是包含滚动内容的元素的大小；scrollHeight、scrollWidth指的是在没有滚动条的情况下，元素内容的总高度，主要用于确定元素的实际大小；scrollLeft、scrollTop指被隐藏在内容区域左侧和上方的像素数，通过设置这2个属性可以改变元素的滚动位置
//元素尚未被滚动的情况下
element.scrollLeft == 0;
element.scrollTop == 0;
//如果元素垂直滚动了，element.scrollTop会大于0，并且表示元素上方不可见内容的像素高度，element.scrollLeft同理
