DOM概述选取文档元素

spademan 发布于2019-08-23 10:42 / 1487人阅读

摘要：脚本化文档客户端的存在使得静态的文档变成了可交付式的应用概述文档对象是表示和操作和文档内容的基础。举一个栗子即可以获取的值为的元素。通过标签名选取元素对象的方法可用来选取指定类型。

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

DOM概述

文档对象（DOM）是表示和操作html和xml文档内容的基础api。

这是标题

这是内容

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

选取文档元素 通过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选取元素

私有云服务器托管 JavaScipt选取元素 DOM元素修改DOM元素 dom获取元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96604.html

Xpath、Jsoup、Xsoup(我的Java爬虫之二)

摘要：它最主要的目的是为了在或文档节点树中定位节点所设计。选取所有拥有名为的属性的元素。选取元素的所有元素，且其中的元素的值须大于。实例路径表达式结果选取元素的所有子元素。如在加载文件的时候发生错误，将抛出，应作适当处理。从Xpath说起什么是Xpath XPath是W3C的一个标准。它最主要的目的是为了在XML1.0或XML1.1文档节点树中定位节点所设计。XPath是一种表达式语言，...

Big_fat_cat 2019-08-15 17:48 评论0 收藏0
jQuery笔记总结篇

摘要：希望在做所有事情之前，操作文档。不受层级限制子选择器在给定的父元素下匹配所有子元素。相邻选择器匹配所有紧接在元素后的元素。判断当前对象中的某个元素是否包含指定类名，包含返回，不包含返回下标过滤器精确选出指定下标元素获取第个元素。原文链接 http://blog.poetries.top/2016... 首先，来了解一下jQuery学习的整体思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 评论0 收藏0
你所不了解的querySelector

摘要：而事实上，它会在的子代元素中匹配查询条件。它们并不会相对于任何特定的元素，甚至不会相对于调用的元素。伪选择器是相对当前作用域进行匹配的。它们是和的替代方法，存在父节点上。了解像这些坑很重要，因为从它们的行为中很难了解它们的实质特性。原文链接地址：http://blog.lxjwlt.com/front-...笔者整理笔记： 1.API介绍先看看MDN上怎么介绍这个API的：概述返回...

freewolf 2019-08-20 11:39 评论0 收藏0
jQuery 入门详解（一）

摘要：前面也花了不少时间，专门介绍了基础这一块，从最基础的讲起，再到以及特效。对象，文档对象模型，每一份都可以表示成一棵树。注意选择器返回的是对象。名称用法描述相当于，子类选择器相当于后代选择器查找兄弟节点，不包括自己本身。 showImg(https://segmentfault.com/img/remote/1460000013677116?w=1920&h=1080); jQuery ...

only_do 2019-08-22 15:20 评论0 收藏0
CSS选择器概述

摘要：常用于链接描点上用户行为选择器选择匹配的元素，且匹配元素被激活。，选择的是奇数项，而使用选择的却是偶数项否定伪类选择器选择器功能描述匹配所有除元素外的元素属性选择器语法选择器功能描述用于选取带有指定属性的元素。 CSS选择器概述一.CSS3 选择器分类 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.选择器语法...

wangjuntytl 2019-08-29 15:37 评论0 收藏0