【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="