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 ...
随机推荐
- 王垠:写给支持和反对《完全用Linux工作》的人们
王垠:写给支持和反对<完全用Linux工作>的人们 在一阵阵唾骂和欢呼声中,<完全用linux工作>被转载到了天涯海角.很多人支持我,也有很多人唾骂我.我不知道它是怎样流传到那 ...
- rem2
html{font-size:50px;}body{font-size:24px;}@media screen and (min-width:320px){ html{font-size:21.333 ...
- Session共享实现方案调研
1.背景 随 着互联网的日益壮大,网站的pv和uv成线性或者指数倍的增加.单服务器单数据库早已经不能满足实际需求.目前大多数大型网站的服务器都采用了分布式服务 集群的部署方式,所谓集群,就是让一组计算 ...
- Linux学习笔记(七) 查询系统
1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...
- 网络基础——OSI参考模型
一.OSI/ISO/IOS傻傻分不清楚 ISO 国际标准化组织(International Organization for Standardization)简称ISO,是一个全球性的非政府组织,是国 ...
- 被 idea 坑了的记录篇
这个星期真的是波折的一周~~~~ 不得不吐槽下无敌坑的自己了,社会我娜姐,坑起来连自己都坑~~ 其实这也不全算我自己的坑,我只是卸载了idea,重新装了一下而已,很神奇的把idea的几个坑全撞了一遍( ...
- 表格头部header固定
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于ant引用android第三方工程打包的问题, invalid resource directory name: F:\workspace\Zlib\bin\res/crunch
转载自 https://zhidao.baidu.com/question/200134399463655885.html invalid resource directory name: F:\wo ...
- Python学习笔记 (2.2)Python中的字符编码问题及标准数据类型之String(字符串)
Python3中的String类型 首先,Python中没有字符类型,只有字符串类型.单个字符按照长度为1的字符串处理,这对于曾是OIER的我来说有点不适应啊. 字符串的表示方法 最常用的就是用一对双 ...
- HDU5266 LCA 树链剖分LCA 线段树
HDU5266 LCA Description 给一棵 n 个点的树,Q 个询问 [L,R] : 求点 L , 点 L+1 , 点 L+2 -- 点 R 的 LCA. Input 多组数据. The ...
|