DOM扩展

1、选择符API

querySelector()接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配元素，则返回null

1
2
3

var myDiv = document.querySelector(".myDiv");     //通过Document调用该方法，在文档元素范围内查找
console.log(myDiv.innerHTML);            //1


    1
    2
    3

var ul = document.getElementById("myList");
var li = ul.querySelector(".item");       //通过Element类型调用只在其后代元素范围内查找
console.log(li.innerHTML);                //1

querySelectorAll()接收的参数与querySelector()一样，只是返回的是所有匹配元素，返回一个NodeList实例

1
2
3

var myDiv = document.querySelectorAll(".myDiv");
console.log(myDiv.length);                 //3
console.log(myDiv[2].innerHTML);           //3


    1
    2
    3

var ul = document.getElementById("myList");
var li = ul.querySelectorAll(".item");
console.log(li.length);                    //3
console.log(li[1].innerHTML);              //2

2、通过类名获取`getElementsByClassName()`


    1
    2
    3

var lis = document.getElementsByClassName('item');       //接收一个参数，表示类名的字符串
console.log(lis.length);        //3

3、插入标记`innerHTML`属性

读模式下，innerHTML属性返回与调用元素子节点对应的HTML标记；写模式下，innerHTML属性根据指定值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点


    1
    2
    3

var myList = document.getElementById('myList');
var myListInnerHTML = myList.innerHTML;
console.log(myListInnerHTML);               
//返回字符串
//1
//2
//3

var myList = document.getElementById('myList');
myList.innerHTML = '3'; 
console.log(myList.innerHTML);                //3，写模式下，重新设置
myList.innerHTML = "hello world";   
console.log(myList.innerHTML);              //hello world，如果设置的是纯文本，那结果就是设置纯文本

4、`children`属性

由于IE9之前的版本和其他浏览器处理文本节点中的空白符有差异，因此出现了children属性


    1
    2
    3

var myList = document.getElementById('myList');
console.log(myList.children);                //返回3个li元素节点
console.log(myList.childNodes);          //返回除li元素节点外还有文本节点

5、插入文本

通过innerText属性可以直接操作元素中包含的文本内容，包括子文档树文本；通过该属性读取值时，会将子文档树中的文本拼接起来；写入值时，结果会删除所有子节点，插入包含相应文本值的文本节点


    1
    2
    3

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种：通过元素包含外部样式表文件、使用