【WIP】客户端JavaScript DOM

创建: 2017/10/12

初步完成: 2017/10/15

更新: 2017/10/14 标题加上【WIP】,继续完成

【TODO】

补充暂略的，搜【略】

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

文本节点	文本
要素节点	null

nodeName

要素节点	大写的要素名
文本节点	"#text"

表示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 DOM

最新文章

热门文章