DOM扩展

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同理