Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >DOM概述 选取文档元素

DOM概述 选取文档元素

原创
作者头像
mySoul
发布于 2018-08-05 16:07:48
发布于 2018-08-05 16:07:48
1.1K0
举报
文章被收录于专栏:mySoulmySoul

脚本化文档

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

DOM概述

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

代码语言:txt
AI代码解释
复制
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>这是标题</title>
</head>
<body>
	<h1>这是标题</h1>
	<p>这是内容</p>
</body>
</html>

将会有一个树状图

我懒就不写了。

选取文档元素

通过ID选取元素

举一个栗子,通过ID查找多个元素

代码语言:txt
AI代码解释
复制
/*
 *	函数接收任意多的字符串参数
 *	每个参数将当做元素的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属性的值不必是唯一的,多个元素可能存在相同的名字。

举一个栗子

代码语言:txt
AI代码解释
复制
var radiobuttons = document.getElementsByname("favorite_cole");

即可以获取name的值为

代码语言:txt
AI代码解释
复制
favorite_cole

的元素。

通过标签名选取元素

Document 对象的getElementByTagName()方法可用来选取指定类型。所有的html元素。

举一个栗子,选取所有包含span元素的对象

代码语言:txt
AI代码解释
复制
var spans = document.getElementsByTagName("h3")

将会返回一个NodeList对象

代码语言:txt
AI代码解释
复制
var firstspara = document.getElementsByTagName("p")   // 选取所有的p元素的,返回一个所有p元素的对象

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

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

代码语言:txt
AI代码解释
复制
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对象进行循环迭代

代码语言:txt
AI代码解释
复制
// 实现一个将所有的image进行全部隐藏
for (var i = 0; i < document.getElementsByTagName("img").length; i++ ) {
	document.getElementsByTagName("img")[0].style.display = "none";		// 设置其css为的display的属性值为none
};

返回值为设置的style 为none

不能再类数组上调用数组的方法,不过可以通过原型链来完成间接的调用

代码语言:txt
AI代码解释
复制
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成员,

迭代删除一个元素

代码语言:txt
AI代码解释
复制
var snapshot = Array.prototype.slice.call(document.getElementsByTagName("img"), 0)	// 使用浅拷贝,生成副本对副本进行操作

再次使用

代码语言:txt
AI代码解释
复制
Array.prototype.splice()

执行删除操作,但是其真正的节点不会删除,因为是一个副本

下面是通过css选取元素

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript DOM基础
DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。 一.DOM介绍 DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。 DOM有三个等级,分别是DOM1、DOM2、DOM3,并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox、Safa
汤高
2018/01/11
1.5K0
JavaScript选择器
JS选择器常用的有getElementById()、getElementsByClassName()、getElementsByName()、getElementsByTagName()、querySelector()、querySelectorAll()。
WindRunnerMax
2020/08/27
8460
DOM编程
一切能够通过html操作的,也能够用js来实现,这个就是jsDOM编程的魅力。DOM操作其实很直观,我们直接看代码。
大熊G
2022/11/14
4120
DOM编程
系统学习javaweb-06-javascript
parseFloat() 整数字符串仍转换为整数 IsNaN (is not a muber)不是数字返回true,是数字返回false
csxiaoyao
2019/02/20
1.1K0
javaScript操作DOM
文档对象模型(Document Object Model, DOM),在控制面板中用window.document获取
河马嘴不大
2022/12/24
7180
javaScript操作DOM
JavaScript 学习-27.查找HTML DOM节点(元素)
前言 如何查找和访问 HTML 页面中的节点元素?也就是我们经常说的定位元素的一些方法。 查询 HTML 节点(元素)一些方法 查找 html 页面上的元素,可以用以下方法 方法 节点类型 getElementById() 通过 id 查找 HTML 元素 getElementsByClassName() 通过标 class 属性查找 HTML 元素 getElementsByName() 通过标 name 属性查找 HTML 元素 getElementsByTagName() 通过标 tag 标签查找 H
上海-悠悠
2022/05/26
1.5K0
JavaScript学习总结(七)
这一讲我们来学习DOM编程(十分重要),有了DOM编程,我们就可以操作任意的HTML元素了。
roobtyan
2019/02/21
5730
前端基础-文档对象模型 (DOM)
DOM是JavaScript操作网页的接口,全称为“文档对象模型”(Document Object Model)。 它的作用是将网页转为一个JavaScript对象,从而可以用脚本进行各种操作(增删改查)。
cwl_java
2020/03/26
1.2K0
【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )
在之前的博客中 , 都是通过 ID、 标签名、类名 获取 HTML 网页中的 DOM 元素 , 分别使用
韩曙亮
2024/06/24
4480
【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )
JavaScript-Dom
JavaScript-Dom 简介 DOM:Document Object Model 节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 document对象 常用属性 名称 说 明 referrer 返回载入当前文档的**URL** URL 返回当前文档的**URL** document.referrer document.URL ​ document常用方法 名称 说 明
xiaozhangStu
2023/05/04
5070
DOM操作笔记
DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。
bamboo
2019/01/29
1.1K0
DOM操作笔记
记录一些前端面试题
定时自动刷新,content表示刷新间隔,单位为秒s,下面代码表示页面每隔三秒刷新一次
wscats
2020/06/05
7060
新手如何在 ES6 如何操作HTML DOM元素?
DOM代表文档对象**模型。HTML 页面在浏览器中呈现。浏览器将从网络服务器下载的页面中包含的所有元素组装到其内存中。一旦完成,浏览器就会在浏览器窗口中显示这些对象,一旦完成,浏览器就无法再识别单个 HTML 元素。支持 JavaScript 的浏览器能够在 HTML 页面在浏览器中呈现之后识别该页面中的各个对象,因为支持 JavaScript 的浏览器可以识别并使用 DOM。因此,允许随意控制对象的功能。
用户1418987
2023/10/21
5180
新手如何在 ES6 如何操作HTML DOM元素?
JavaScript的理解记录(5)
    1、Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Text,这三个也是Node的其中几个子类; 
JQ实验室
2022/02/09
1.6K0
javascript之DOM操作
http://www.cnblogs.com/kissdodog/archive/2012/12/25/2833213.html
bear_fish
2018/09/19
6070
前端架构师之10_JavaScript_DOM
第1级DOM(DOM Level 1,或DOM1)。为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。结合了Netscape及微软公司开发的DHTML(动态HTML)思想。
张哥编程
2024/12/13
3360
DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次变化的节点树,允许开发人员添加、移除和修改页面的某一部分。
奋飛
2019/08/15
1.7K0
JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)
前言 我们平常说的查找元素 和 节点到底有什么区别?为什么有时候返回HTMLCollection ,有时候返回NodeList? HTMLCollection 和  NodeList 的区别又是什么?带着这些问题进入本篇的学习。 节点与元素 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 以下示例 <div id="user"> <
上海-悠悠
2022/05/30
2.2K0
JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)
JavaScript DOM 基本操作,查找节点信息
使用过 jQuery 的人清楚,一个选择器就够了,需要什么选什么,但是其内部封装的方法实际是 DOM 操作,利用 JavaScript 中的方法来操作 HTML 标签等信息。本文介绍一些基础的获取节点信息的操作。
我与梦想有个约会
2023/10/20
3450
JavaScript DOM 基本操作,查找节点信息
DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次变化的节点树,允许开发人员添加、移除和修改页面的某一部分。
奋飛
2021/08/30
1.7K0
DOM
相关推荐
JavaScript DOM基础
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档