【js基础】js基础巩固——DOM操作（四）

NODE类型

js中所有的节点类型都继承自Node类型，因此所有节点都享受这相同的基本属性和方法。

• nodeType属性，用于表明节点类型。最常用的是NODE.ELEMENT_NODE(1), NODE.TEXT_NODE(3).
• nodeName和nodeValue属性：前者保存原书的标签名，nodeValue是始终为null
• 节点关系：每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存有序的节点，可以通过方括号来访问这些节点。nodelist的独特之处在于，它实际上基于dom结构动态执行查询的结果，因此dom结构的变化能够自动反映到nodelist对象中。
• Array.prototype.slice(someNode.childNodes,0)
• 每个节点都有parentNode属性，该属性指向文档树中的父节点。previousSibling, nextSibling属性，可以访问同一列表中的其它节点。firstChild, lastChild指向第一个和最后一个节点。hasChildNodes()在节点包含一个或多个子节点的时候返回true。
• 操作节点：appendChild():用于向childNodes列表添加一个节点，添加节点后，childNodes新添的节点及相应的关系都会更新。如果传入到appendChild()的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置。
• insertBefore()方法：传两个参数：要插入的节点和作为参照的节点，插入节点后，被插入的节点会变成参照节点的前一个同胞节点。
• replaceChild():接受两个参数：要插入的节点和要替换的。
• removeChild():一个参数：要删除的
• cloneNode():用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个bool参数，表示是否执行深复制，当为true，执行深复制，也就是复制节点和整个子节点树，在参数为false的情况下，执行浅复制，即复制节点本身。这样要通过appendChild()等才能将它添加到文档中。
• normalize():唯一的作用就是处理文档中的文本节点，由于解析器的实现或dom操作等原因，可能会出现文本节点不包括文本，因此当在某个节点上调用这个方法时，就会在该节点的后代节点上删除空文本节点或合并为一个文本节点。

Document类型

节点信息：
1 document.documentElement==document.firstChild,都指向页面中的html元素。
2 document.body指向页面中的body元素。
3 document.doctype来访问标签。
文档信息：
1 document.title,用于取得和设置文档的信息。
2 与网页请求有关的三个请求：url,domain,referrer; referer是取得来源页面的url，在这三个属性中，只有domain是可以修改的，但是有同源的限制，并且只有松散的可以成功。当页面中包含来自其他子域的框架或者内嵌框架时，能够设置document.domain就非常方便了，由于跨域安全限制，来自不同子域的页面无法通过js通信，通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对象包含的js对象。
查找元素
1 提供了两个方法：getElementById()和getElementsByTagName()如果页面中多个元素的ID相同，getElementById()只返回第一个元素。getElementsByTagName返回一个nodelist，在html文档中，这个方法会返回一个htmlcollection对象，作为一个动态的集合，可以使用方括号或item返回对象中的项，这个对象还有一个方法，是namedItem(),使用这个方法可以通过元素的name特性取得集合中的项。不仅可以通过方括号[0]来访问，还可以传入name来访问[‘myimage’]。
2，第三个方法：getElementsByName():返回带有给定name的所有元素，最常见的使用方法是取得单选按钮。
特殊集合
这些集合都是htmlcollection对象
document.anchors 包含文档中所有带name特性的a元素
document.forms 包含文档中所有的form元素
document.images 包含文档中所有的image元素
document.links 包含文档中所有带href的a元素
文档属性
document.write():写入文档

Element类型

1 html元素
所有html元素都由htmlelement类型表示，该类直接继承了element并添加了一些属性，添加的这些属性分别对应于每个html中存在的标准特性。

• id:元素在文档中的唯一标示符
• title：有关元素的附加说明
• lang:元素内容的语言代码
• dir:语言的方向
• className:与元素的class属性对应
  这几个属性都是可写的

2 取得特性
操作特性的dom方法有三个：getAttribute();setAttribute();removeAttribute();特性的名称是不区分大小写的。自定义特性应该加上data-前缀以便验证。

有两类特殊的特性：第一类特性就是style，再通过getattribute访问时，返回的是一个文本。在通过属性访问时，则返回一个对象。由于style属性是用于以编程方式访问元素样式，因此并没有映射到style特性。

第二类是onclick等事件处理程序，在元素上使用，返回的是js代码，通过getattribute访问，是文本。

综上，一般不经常使用getattribute(),而是只有在取得自定义特殊值的时候，才会使用getattribute方法。

3.attributes属性
element类型是使用attributes属性的唯一一个dom节点类型，attributes属性包含一个NamedNodeMap,元素每一个特性都由一个attr节点表示，每个节点都保存在NamedNodeMap中，该对象有如下方法。

• getNameItem(name):返回nodeName属性等于name的节点
• removeNameItem(name):从列表中移除nodeName属性等于name的节点
• setNameItem(node)向列表中添加节点
• item(pos)：返回位于数字pos位置处的节点。

一般多用于遍历：
element.attributes[i].nodeName
element.attributes[i].nodeValue

4.创建元素
document.createElement()可以创建新元素，也为新元素设置了ownerDocument属性。要把新元素添加到文档树中，可以使用appendChild()等。

5 用js创建表格
p283

6 理解NodeList和NameNodeMap和HTMLCollection,每当文档结构发生变化时，它们都会得到更新。

DOM扩展

两个方法：querySelector()方法和querySelectorAll方法，其中querySelector接受一个css选择符，返回与该模式匹配的第一个元素，如果没有匹配元素，则返回null。通过document类调用queryselector方法时，只会在元素后代的范围内查找匹配的元素。

querySelectorAll()方法，但是返回的是所有的匹配元素而不仅仅是一个元素，这个方法返回的是nodelist实例，而其底层实现则类似与一组元素的快照，而非不断对文档进行搜索，与querySelector类似，能够调用querySelectorAll方法的类型包括document,documentFragment和element

matchesSelector()方法：这个方法接受一个参数，即css选择符，如果调用元素与该元素符匹配，则返回true,否则，返回false

元素遍历
dom元素新增加了5个属性

• childElementCount:返回子元素的个数
• firstElementChild:指向第一个子元素
• lastElementChild:指向最后一个子元素
• previousElementSibling:指向前一个同辈元素
• nextElementSibling:指向后一个同辈元素

与类相关的扩充
1 getElementByClassName():也可以传入多个类名，既可以在元素上调用也可以在document上调用。
2 classList属性：是新集合类型DOMTokenList的实例，可以使用方括号，此外还有其他方法：

• add(value)
• contains()
• remove()
• toggle()

焦点管理
document.activeElement属性，这个属性始终会引用dom中当前获得焦点的元素，元素获得焦点的方式是页面加载，用户输入或调用focus()。默认情况下。文档刚刚加载完成时，保存的是document.body,文档加载期间，值为null

HTMLDocument的变化
1 readyState属性：loading /complete
2 兼容模式：
3 head属性： document.head
4 自定义数据属性：添加前缀data-, 可以通过dataset属性来访问自定义元素属性的值（以点的形式访问是没有data前缀的）

插入标记：
1 innerHTML:返回与调用元素的所有子节点对应的html标记