DOM树 |
概要 |
基本节点
文档节点
Document Node |
根节点Document
呼出: document
生成器
construction |
HTMLDocument |
nodeType |
9 |
nodeName |
"#document" |
nodeValue |
null |
|
元素节点 |
生成器
construction |
HTMLElement |
nodeType |
1 |
nodeName |
大写的元素名 |
nodeValue |
null |
|
属性节点 |
生成器
construction |
Attr |
nodeType |
2 |
nodeName |
属性名 |
nodeValue |
属性值 |
|
文本节点 |
空白节点 |
半角空格,tab,改行等
html要素最开始和最后不生成空节点 |
生成器
construction |
Text |
nodeType |
3 |
nodeName |
"#text" |
nodeValue |
文本内容, 字符串 |
|
注释节点 |
生成器
construction |
Comment |
nodeType |
8 |
nodeName |
"#comment" |
nodeValue |
注释内容, 字符串 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
节点对象的属性 |
注意: 不要这样子找节点,
空节点的存在影响结果!
一般用class和id来找
parentNode |
呼出母节点
Document没有母节点,返回null |
childNodes |
呼出所有子节点的类似数组的对象(NodeList) |
firstChild |
呼出第一个子节点
没有返回null |
lastChild |
呼出最后一个子节点
没有返回null |
nextSibling |
呼出下一个兄弟节点(母节点相同) |
previousSilbing |
呼出上一个兄弟节点 |
nodeType |
说明节点的种类的数值
1 |
要素节点 |
3 |
文本节点 |
9 |
根节点Document |
|
nodeValue |
|
nodeName |
|
|
|
|
表示html树的属性 |
无视文本节点,所以不会有空节点
parentElement |
获取母元素 |
children |
获取所有子元素的类似数组的对象(NodeList) |
firstElementChild |
获取第一个子元素 |
lastElementChild |
获取最后一个子元素 |
nextElementSibling |
下一个兄弟元素 |
previousElementSibling |
上一个兄弟元素 |
childElementCount |
子元素的数量
相当于 children.count |
|
|
|
|
|
|
|
|
|
|
|
节点对象(Node
Object)的取得 |
通过ID获取
单个 |
ID不能重复,所有可以获取特定的一个
函数 |
document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x(str); |
例 |
let id_test =
document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x('id-test'); |
|
|
|
|
|
|
|
通过元素名获取
多个 |
不区别大小写
获取所有同类元素
函数 |
document.getElementsByTagName_r(str); |
例 |
let tag_test =
document.getElementsByTagName_r('h1'); |
注意 |
复数形式,不要漏了s
getElementsByTagName |
|
参数"*"可以获取所有的子元素
document.getElementsByTagName_r("*"); |
|
可以用于任何元素 |
返回的是NodeList, 只可读的类似数组的Object,带length
会实时变化
迭代时候复制成一个静态的
var divs =
document.getElementsByTagName_r("div");
var staticList = Array.prototype.slice.call(divs,
0); |
通过class名获取元素
多个 |
函数 |
document.getElementsByClassName(str); |
例 |
var color_test =
document.getElementsByClassName('color-test'); |
|
复数形式,不要漏了s |
|
|
|
|
|
通过name获取元素
多个 |
函数 |
document.getElementsByName(str); |
例子 |
#
TODO: 暂略 |
|
复数形式,不要漏了s |
name属性 |
form, input这类控制表格的元素
img,map,object等
上述的可以设定 |
|
|
|
用CSS选择器 |
函数 |
document.querySelectorAll(str); |
例 |
document.querySelectorAll("body>h1:first-child");
就是直接写css选择器 |
只选匹配的第一个 |
document.querySeletor(str); |
|
不会实时变化 |
|
|
|
接入用的属性 |
带[]的都是HTMLCollection对象,类似数组
document.documentElement |
文档根元素(html)的参照 |
document.head |
head的参照 |
document.body |
body的参照 |
document.forms[] |
|
document.images[] |
img |
document.anchors[] |
|
document.applets[] |
html5以后是object标签 |
document.embeds[]
document.plugins[]
HTML5新增 |
embed |
document.scripts[]
HTML5新增 |
scirpt |
|
|
|
|
|
|
|
|
|
|
|
属性值的获取与设定 |
元素的属性 |
《a id="
- 【WIP】客户端JavaScript Web Object
创建: 2017/10/11 更新: 2017/10/14 标题加上[WIP],增加[TODO] 更新: 2018/01/22 更改标题 [客户端JavaScript Web Object, UR ...
- JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)
具有交互性的JavaScript程序使用的是事件驱动的程序设计模型. 目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- JavaScript DOM 编程艺术(第2版)读书笔记(1)
JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- JavaScript DOM编程艺术第一章:JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- 【JavaScript权威指南(第五版)】笔记之第二部分 客户端JavaScript 第13章~第23章
第十三章 Web浏览器中的javascript ① eg:下面两行代码实际上执行的是相同的功能 var answer = 42; window.answer = 42; ③每个window对象 ...
- JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)
XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话. 大多数浏览的客户端JavaScri ...
- JavaScript 客户端JavaScript之 Web浏览器的环境
Web浏览器实现的Javascript,通过Web浏览器实现的JavaScript引入了大量可脚本化的对象(1.Web浏览器 2.HTML 3.HTML中的内容) Web浏览器中的Javascrip ...
随机推荐
- JPA @MappedSuperclass注解
该注解只能引用于类上,使用该注解的类将不是一个完整的类,不会映射到数据库的表中,但是该类的属性会映射到其子类的数据库字段中 @MappedSuperclass注解使用在父类上面,是用来标识父类的作用 ...
- 搜索--P1219 N皇后
题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序列2 4 6 1 3 ...
- FATE HDU - 2159
解法 完全背包但是又有别的条件(忍耐值为体力经验是价值) ①首先杀怪是有上限s的,所以需要记录杀怪的数量并且if时候还需要加上条件 ②最后还得遍历一下从小到大遍历当前dp范围内是不是已经有够经验的那么 ...
- 教你如何使用Python写游戏辅助脚本
主要实现方式是通过图片的对比,在游戏中就行点击.运行程序需要以下东西. PIL: 图片处理模块 (python3 换成了 pillow) 下载地址: https://www.lfd.uci. ...
- Django中的模板变量
示例文件: template_variable_demo.zip
- 电商架构设计-通过系统和业务拆分,遵循单一职责原则SRP,保障整个系统的可用性和稳定性
个人观察 1.通过系统和业务拆分,遵循单一职责原则SRP,保障整个系统的可用性和稳定性. 2.单一职责原则SRP,真的很关键,广大程序员需要不断深入理解这个原则. 3.架构图是架构师的重要输出,通过图 ...
- 【Codeforces 1037D】Valid BFS?
[链接] 我是链接,点我呀:) [题意] 让你判断一个序列是否可能为一个bfs的序列 [题解] 先dfs出来每一层有多少个点,以及每个点是属于哪一层的. 每一层的bfs如果有先后顺序的话,下一层的节点 ...
- 推销员(codevs 5126)
题目描述 Description 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有N家住户,第i家住户到入口的距 ...
- spark之scala快速入门
scala和java都是在jvm之上的语言,相对来讲,scala热度比较低,其实并不是一个特别好的语言选择. 原因倒不是因为scala本身的缺点,而是使用人群不够多,论坛和社区不够活跃.这就跟社交软件 ...
- codevs——1517 求一次函数解析式
1517 求一次函数解析式 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 相信大家都做过练习册上的这种 ...
|