DOM概述 选取文档元素
脚本化文档
客户端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选取元素
DOM概述 选取文档元素相关推荐
- DOM概述 选取文档元素 1
脚本化文档 客户端js的存在使得静态的html文档变成了可交付式的web应用 DOM概述 文档对象(DOM)是表示和操作html和xml文档内容的基础api. <!doctype html> ...
- 选取文档元素的API
除了现在常用的选取API 1 document.getElementById() 2 document.getElementsByName() 3 document.getElementsByTagN ...
- 使用dom方式遍历文档||获取元素||从元素中获取数据
使用dom方式遍历文档 获取元素 根据id查询元素getElementById 根据标签获取元素getElementsByTag 根据class获取元素getElementsByClass 根据属性获 ...
- java使用org.w3c.dom解析XML文档,创建、增删查改,保存,读取,遍历元素等操作
全栈工程师开发手册 (作者:栾鹏) java教程全解 java使用org.w3c.dom(java dom)解析XML文档,创建.增删查改,保存,读取,遍历元素等操作 在保存文件时需要载入crimso ...
- 【Qt】DOM读取XML文档
00. 目录 文章目录 00. 目录 01. 概述 02. 开发环境 03. XML文档示例 04. DOM读取XML文档内容 05. 预留 06. 附录 01. 概述 DOM(Document Ob ...
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
- [Qt教程] 第27篇 XML(一)使用DOM读取XML文档
[Qt教程] 第27篇 XML(一)使用DOM读取XML文档 楼主 发表于 2013-5-21 21:14:28 | 查看: 1001| 回复: 14 使用DOM读取XML文档 版权声明 该文章原创 ...
- JAVA中利用DOM解析XML文档
JAVA中利用DOM解析XML文档 package org.sws.utils; import java.io.File;import java.io.IOException; import java ...
- java jdom进行xml的增删改差_java使用DOM对XML文档进行增删改查操作实例代码
本文研究的主要是java使用DOM对XML文档进行增删改查操作的相关代码,具体实例如下所示. 源代码: package com.zc.homeWork18; import java.io.File; ...
最新文章
- 项目实践:SpringBoot三招组合拳,手把手教你打出优雅的后端接口
- vlookup 2张表 显示na_Vlookup函数的这7个应用技巧都不掌握,那就真的Out了
- mysql特效_MySQL树 – 前端开发,JQUERY特效,全栈开发,vue开发
- 从SOURCE_BUFFER单元开始存放了20个字母A, 编程将这20个字母A的字符 串向下移10个单元.
- 实验4 [bx]和loop的使用
- dev c++ 代码补全_zsh配置与代码自动补全+tmux配置
- 字符串处理 —— 单模式匹配
- Java基础(七)——文件、IO流
- android studio应用开发案例,Android应用开发案例教程(Android Studio版).pptx
- 台式计算机时间不能同步,电脑时间同步不了怎么办
- 2021年茶艺师(初级)考试题及茶艺师(初级)新版试题
- 中国象棋局面识别 -2.象棋棋子的识别
- 清华大学-中国人民银行金融研究所2023年联合培养博士研究生招生简章
- 时间复杂度的计算详解
- 相机camera与小孔成像opengl
- 【人脸识别】FaceNet(二)
- 榜样访谈——董宇航:在俱乐部中收获爱情
- unity 获取选中的目录_Unity的目录管理
- ASP.net网页进行数据更新操作
- 查漏补缺之(一)—— fasttext与TextCNN
热门文章
- Nature癌症“牵线木偶”理论:科学家找到了不易误伤健康细胞的“剪刀”
- 用户体验已成过去时 AI要从公民乃至社会的角度去思考问题
- 这10个著名的思想实验,竟然是物理学家完成的
- 对话微软黄学东:语音语言技术是镶在 AI 皇冠上的明珠
- 报告:采用人工智能并不意味着成功
- ACM公布2017年图灵奖,大卫·帕特森和约翰·轩尼诗获奖
- Natural 自然语言处理(NLP)「全解析」
- 开发vs测试 | 每日趣闻
- 福利内卷时代来临!腾讯为 3300 名员工发 11 亿红包
- 尴尬!嫌疑人以为警察不懂技术偷删代码,不料被当场识破