JavaScript快速入门(六)——DOM
概念扫盲
DOM
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
这篇文章主要讲HTML DOM
HTML DOM
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
JavaScript DOM
DOM树
简单的DOM树
<html><head><title>文档标题</title></head><body><a href="#">我的链接</a><h1>我的标题</h1></body>
</html>
节点关系
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
我们将刚才的DOM树截取掉一部分,
节点类型
节点类型值 | 节点类型 | 描述 | 子节点 |
---|---|---|---|
1 | Element | 代表元素 | Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference |
2 | Attr | 代表属性 | Text, EntityReference |
3 | Text | 代表元素或属性中的文本内容。 | None |
4 | CDATASection | 代表文档中的 CDATA 部分(不会由解析器解析的文本)。 | None |
5 | EntityReference | 代表实体引用。 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
6 | Entity | 代表实体。 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
7 | ProcessingInstruction | 代表处理指令。 | None |
8 | Comment | 代表注释。 | None |
9 | Document | 代表整个文档(DOM 树的根节点)。 | Element, ProcessingInstruction, Comment, DocumentType |
10 | DocumentType | 向为文档定义的实体提供接口 | None |
11 | DocumentFragment | 代表轻量级的 Document 对象,能够容纳文档的某个部分 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
12 | Notation | 代表 DTD 中声明的符号。 | None |
node.nodeType
获取到的将是对应的节点类型值,注意这个值以字符串形式返回。
节点类型 | nodeName 返回 | nodeValue 返回 | |
---|---|---|---|
1 | Element | 元素名 | null |
2 | Attr | 属性名称 | 属性值 |
3 | Text | #text | 节点的内容 |
4 | CDATASection | #cdata-section | 节点的内容 |
5 | EntityReference | 实体引用名称 | null |
6 | Entity | 实体名称 | null |
7 | ProcessingInstruction | target | 节点的内容 |
8 | Comment | #comment | 注释文本 |
9 | Document | #document | null |
10 | DocumentType | 文档类型名称 | null |
11 | DocumentFragment | #document 片段 | null |
12 | Notation | 符号名称 | null |
JavaScript DOM接口
获取DOM node
传统方法
<html><head><title>文档标题</title></head><body><form action="get" id="target-form"><input type="text" name="target-input" value="123" /> </form></body><script type="text/javascript">var a = document.getElementById("target-form"); // form对应的节点</script>
</html>
切记不要丢了前面的document,否则会报错。
var a = document.getElementsByName("target-input")[0]; // input对应的节点
getElementsByTagName和前面两个分别有相同之处,又有不同之处。它不仅仅是document对象的方法,还是所有元素节点的方法。它传入的参数是标签名,返回的是nodelist,因为明显同个文档中可以有多个相同标签。
<html><head><title>文档标题</title></head><body><form action="get" id="target-form"><input type="text" name="target-input" value="123" /> </form></body><script type="text/javascript">var a = document.getElementById("target-form").getElementsByTagName("input")[0]; // input对应的节点</script>
</html>
可能有些人会问,我还看到了getElementsByClassName方法啊。其实,这方法只是部分浏览器产商定下的方法,很实用,但并非W3C标准里的方法,至少IE8及以下是不能用的。
新的方法
<html><head><title>文档标题</title></head><body><form action="get" id="target-form"><input type="text" name="target-input" value="123" /><input type="text" name="target-input2" value="123" /></form></body><script type="text/javascript">var a = document.querySelector("#target-form").querySelectorAll("input"); // 包含两个input的数组</script>
</html>
获取及操纵属性值
var a = document.getElementById("target-form").getElementsByTagName("input")[0].value;
如果我们要设定输入框的值,也类似:
document.getElementById("target-form").getElementsByTagName("input")[0].value = “12345”;
但这样好像没什么用,我们换种用法,更使用一点。我们经常看到有一种效果,点击按钮,某个东西消失了,再点击,又出现了。我们来模拟一下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文档标题</title></head><body><p>点击按钮此句消失</p><button id="btn">消失</button></body><script type="text/javascript">var btn = document.getElementById("btn"),p = document.getElementsByTagName("p")[0];btn.onclick = function() {if(p.style.display == "none") {p.style.display = "";this.innerText = "消失";} else {p.style.display = "none";this.innerText = "显示";}}</script>
</html>
在这里,我们操作的是元素节点p里面的属性节点style,修改其display属性,从而达到修改CSS的目的。
DOM 事件
转载于:https://www.cnblogs.com/smght/p/4369641.html
JavaScript快速入门(六)——DOM相关推荐
- JavaScript快速入门(1)
JavaScript快速入门 详情百度百科 1. 什么是javaScript 2.快速入门 2.1.js引入方法 2.2. javaScript 的基本语法入门 2.3.数据类型 2.4.严格检查模式 ...
- JavaScript快速入门(四)——JavaScript函数
函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)--JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
- JavaScript基础入门 封装DOM 连缀
JavaScript基础入门 封装DOM 连缀 适合初学者 获取元素节点 获取ID 获取tagName 获取Name 设置 这个只能是设置CSS样式,添加html方法,添加click方法等. 封装的b ...
- 狂神JavaScript快速入门学习笔记
狂神视频地址 1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script>alert('he ...
- 3.JavaScript快速入门
1.什么是JavaScript 1.概述 是一门世界上最流行的脚本语言 Java和 JavaScript 一个合格的后端人员 必须精通JavaScript 2.历史 ECMAScript是JavaSc ...
- 前端三大技术 HTML、CSS、JavaScript 快速入门手册
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...
- javaScript快速入门(笔记)
该笔记大部分搬运B站遇见狂神说的javaScript,顺便把图文合并记录,便于回顾 视频地址:[狂神说Java]JavaWeb入门到实战_哔哩哔哩_bilibili记得三连 目录 1 ...
- JavaScript 快速入门教程
文章目录 1.JavaScript 简介 2.JavaScript 用法 2.1.在 `<head>` 或者 `<body>` 的 JavaScript 2.2.外部的 Jav ...
- JavaScript快速入门-ECMAScript本地对象(String)
一.String对象 String对象和python中的字符串一样,也有很多方法,这些方法大概分为以下种类: 1.索引和查找 1.charAt() 返回指定位置的字符. 2.charCodeAt( ...
最新文章
- vfp中,函数subs(计算机管理信息系统,7)返回的结果是,VFP选择题库(可发学生).xls...
- vue 点击事件执行多次
- linux c 设置utc时间,C/C++标准库之转换UTC时间到local本地时间详解
- 网桥(bridge) 和 交换机(switch) 之异同
- 使用postman发送HttpServletRequest请求
- 孙鑫MFC笔记之十五--进程间通信
- C++ primer第一章 C++概述 纪要
- python处理pdf的第三方库_Python使用到第三方库PyMuPDF图片与pdf相互转换
- 数据库之SQL增删改查(UPDATE,DELETE,TOP,COMPUTE,WHERE子句)
- 李沐-动手学深度学习
- java 阿里云消息推送到手机
- 转:著名的100个管理定律点评9 - 成也细节,败也细节略
- python爬取qq音乐评论+jieba分词并统计词频+绘制词云并可视化数据
- 不支持的WTP版本:1.5。 该插件当前仅支持以下版本:1.0 R7
- Spring boot 项目Kafka Error connecting to node xxx:xxx Kafka项目启动异常 Failed to construct kafka consumer
- 肾有多好,就有多年轻
- Android Service---在前台运行服务
- 获取淘宝商品历史价格信息API(PHP,JAVA都可对接)
- 软件测试之 loadrunner12.0.2 汉化教程
- ELK搭建-基于自制docker镜像
热门文章
- 网站推广怎样实现网站设计吸引用户注意完成网站推广指标?
- 网站推广收录少?网站推广专员浅析可能是蜘蛛抓取出现问题
- 具备这四点品质的建站系统就爱了吧!
- java 字符整数_Java整数是否等于字符?
- 安装batocera-linux教程_batocera游戏系统,一个U盘搞定所有模拟器
- 关于微信聊天记录双击弹出具体显示内容的效果
- IRC BOT原来是利用IRC下发CC命令——在xx云环境遇到了,恶意软件开的是6666端口...
- 高效管理 Elasticsearch 中基于时间的索引——本质是在利用滚动模式做数据的冷热分离,热索引可以用ssd...
- RRDTool 存储原理简介——基于时间序列的环型数据库
- Mac VirtualBox 命令行Centos 挂载Mac系统中的文件夹