DOM概述 拔取文档元素

2024年1月15日 172次阅读 来源: 小小____

剧本化文档
客户端js的存在使得静态的html文档变成了可托付式的web运用

DOM概述

文档对象（DOM）是示意和操纵html和xml文档内容的基本api。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>这是题目</title>
</head>
<body>
    <h1>这是题目</h1>
    <p>这是内容</p>
</body>
</html>

将会有一个树状图
我懒就不写了。

拔取文档元素

经由过程ID拔取元素

举一个栗子，经由过程ID查找多个元素

/*
 *    函数吸收恣意多的字符串参数
 *    每一个参数将当作元素的id传给document.getElementById()
 *    返回一个对象，它把这些id映照到对应的Element对象
 *    假如一个id未定义，将会抛出一个Error对象
 */
function getElements(/*ids...*/) {
    var elements = {};    // 最先是一个空map映照对象
    for (var i = 0; i < arguments.length; i++) {    // 轮回每一个参数
        var id = arguments[i];
        var elt = document.getElementById(id);    // 举行查找元素
        if (elt == null)
            throw new Error("No element with id:" + id);    // 抛出非常
        elements[id] = elt;    // 完成映照关联
    };
    return elements;
};

经由过程名字拔取元素

有些html标签会有name元素，区分于id，name属性的值不必是唯一的，多个元素能够存在雷同的名字。
举一个栗子

var radiobuttons = document.getElementsByname("favorite_cole");

即能够猎取name的值为

favorite_cole

的元素。

经由过程标署名拔取元素

Document 对象的getElementByTagName()要领可用来拔取指定范例。一切的html元素。
举一个栗子，拔取一切包括span元素的对象

var spans = document.getElementsByTagName("h3")

将会返回一个NodeList对象

var firstspara = document.getElementsByTagName("p")   // 拔取一切的p元素的，返回一个一切p元素的对象

console.log(firstspara[0]); // 返回第一个元素

查找第一个p元素里的span元素

var firstpara = document.getElementsByTagName("p");
firstpara[0].getElementsByTagName("span");

如许能猎取第一个p元素里的一切的span元素
别的document另有两个属性，分别是特别的body，以及head元素，这两个元素假如源代码未包括，其浏览器会隐式的建立他们，以及documentElement指代文档的根元素。html中，老是为html元素

节点列表和html鸠合

getElementsByName()以及getElementsByTagName()都邑返回NodeList对象

Nodelist 对象 ： 属于只读的类数组对象（具有数组的属性，而且其length会有js诠释器自动举行保护，而且能够举行折断）能够对NodeList类数组对象能够举行轮回迭代，得出一切的节点。

对NodeLsit对象举行轮回迭代

// 完成一个将一切的image举行悉数隐蔽
for (var i = 0; i < document.getElementsByTagName("img").length; i++ ) {
    document.getElementsByTagName("img")[0].style.display = "none";        // 设置其css为的display的属性值为none
};

返回值为设置的style 为none

不能再类数组上挪用数组的要领，不过能够经由过程原型链来完成间接的挪用

var content = Array.prototype.map.call(document.getElementsByTagName("p"),
    (e) => {
        return e.innerHTML;    // 返回序列化过的html代码，该要领继续自Element，一切Document对象的要领都基于其，由于同样是document继续来的，所以具有innerHTML要领
    }
)  // 建立一个数组，并把该数组的元素传入回调函数中举行处置惩罚

注重，保留的不是快照，伴随着html中的DOM的更新，属于及时操纵的，这一点灰常有效
假如在一个没有div中的有一个该要领，假如页面动态加载进的div元素，个中的length会自动更新加1，也会自动成为NodeLsit成员，
迭代删除一个元素

var snapshot = Array.prototype.slice.call(document.getElementsByTagName("img"), 0)    // 运用浅拷贝，天生副本对副本举行操纵

再次运用

Array.prototype.splice()

实行删除操纵，然则其真正的节点不会删除，由于是一个副本
下面是经由过程css拔取元素

    原文作者：小小____
    原文地址: https://segmentfault.com/a/1190000015894128
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞