JavaScript复习之文档对象模型

JavaScript 操作文档对象模型 (DOM)

基本概念

DOM 是 JavaScript 操作网页的接口，全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本对树形文档进行各种操作。

节点

DOM 的最小组成单位叫做节点 (node)。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。
最顶层的节点是 document 节点，它代表了整个文档、是文档的根节点。
每张网页都有自己的 document 节点，window.document 指向这个节点。
文档里面最高一层一般是HTML标签，其他HTML标签节点都是它的下级。

除了根节点以外，其他节点对于周围的节点都存在三种关系:

父节点关系 (parentNode)，直接的那个上级节点；
子节点关系 (childNodes)，直接的下级节点；
同级节点关系 (sibling)，拥有同一个父节点的节点；

查找节点

要具体找到某个节点，可以使用 document 提供的一系列方法。

getElementsByTagName()

参数是标签名；返回所有指定 HTML 标签的元素。

var p = document.getElementsByTagName('p');
p[3].style.background = 'red';

getElementsByClassName()

参数为标签的 class 属性的值返回所有 class 名字符合指定条件的元素。

var p = document.getElementsByClassName('p');
p[1].style.background = 'yellow';

getElementsByName()

参数为标签的 name 属性的值；选择拥有 name 属性的 HTML 元素。

var p = document.getElementsByName('p');
p[0].style.background = 'yellow';

getElementById()

参数为标签的id属性的值,参数大小写敏感；返回匹配指定id属性的元素节点；没有发现匹配的节点，返回null。

var p = document.getElementById('p');
p.style.background = 'yellow';

querySelector()

document.querySelector 方法接受一个CSS选择器作为参数；
如果有多个节点满足匹配条件，则返回第一个匹配的节点；
如果没有发现匹配的节点，则返回null；

var p = document.querySelector('.p');
p.style.background = 'yellow';

querySelectorAll()

document.querySelectorAll 方法与 querySelector 用法类似，
区别是返回一个类似数组的 HTMLCollection 对象，包含所有匹配给定选择器的节点。
多个参数值，使用（英文逗号,）隔开；

var p = document.querySelectorAll('i,.p');
for(var i = 0; i < p.length; i++){
    p[i].style.background = 'yellow';
}

//选中 id 属性值为p1的元素
var p = document.querySelectorAll('[id="p1"]');
//选中div元素的class属相值为p的元素
var p = document.querySelectorAll('div.p');
//选中所有的p标签，但是class值为p的除外
var p = document.querySelectorAll('p:not(.p)');
for(var i=0;i<p.length;i++){
    p[i].style.background = 'yellow';
}

querySelector 不支持CSS伪元素选择器（如 :first-line 和 :first-letter）和伪类选择器（如 :link和 :visited），即无法选中伪元素和伪类。

案例

循环批量事件

<body>
    <input type="button" value="起床了" > <br>
    <input type="button" value="起床了" > <br>
    <input type="button" value="起床了" > <br>
    <input type="button" value="起床了" > <br>
    <input type="button" value="起床了" > <br>
    <input type="button" value="起床了" > <br>

</body>
<script>
    var inps = document.querySelectorAll('input');
    for(var k in inps){
        inps[k].onclick = function(){
            if(this.value == '起床了'){
                for(var i=0;i<inps.length;i++){
                    inps[i].value = '睡觉了';
                }
                this.value = '起床了';
            }else{
                for(var i=0;i<inps.length;i++){
                    inps[i].value = '起床了';
                }
                this.value = '睡觉了';
            }
        }
    }

</script>

点击按钮设置随机背景颜色

<body>
    <div style="width: 100px; height: 100px; border: 1px solid red"></div>    
</body>
<script>
    document.getElementsByTagName('div')[0].onclick = function(){
        this.style.width = parseInt(this.style.width) + 10 + 'px';
        this.style.height = parseInt(this.style.height) + 10 + 'px';
        var rgb = Math.floor(Math.random()*(256 - 0) + 0) + ',';
        rgb += Math.floor(Math.random()*(256 - 0) + 0) + ',';
        rgb += Math.floor(Math.random()*(256 - 0) + 0);
        this.style.background = 'rgb('+  rgb +')';
    }
</script>

JavaScript复习之文档对象模型

JavaScript 操作文档对象模型 (DOM)

基本概念

节点

查找节点

案例

循环批量事件

点击按钮设置随机背景颜色

猜你喜欢