11 js06 DOM

作者: 官清岁月 | 来源:发表于2018-10-12 17:08 被阅读1次

DOM、DOM结构树、dom元素系列操作：

1、DOM：文档对象模型(Document Object Model ),其是一系列方法的集合，其操作html和xml，间接操作css样式(后期DOM结构树中其通过操作html元素对象的属性/方法来操作css样式，没有东西可以直接操作css样式的变化)；

[关于xml:xml --->>xhtml--->>html,html由xml发展而来，相比于html，xml可以自定义标签；xml之前也被用作数据交换格式，如今数据交换格式使用json;]

2、DOM结构树：结构树中每个都是节点(也称为类)，DOM结构树中除了图示节点，还包含DocumentFragment类(文档碎片节点),[其在实际文档中并不存在，其代表一系列没有常规父节点的节点，在一些场景下文档操作中使用文档碎片节点有好处]；同时DOM也定义了一些不常使用的类型，例如doctype声明和XML处理指令等类型；【DOM结构树中所有节点都是对象，有原型链继承关系(js中绝大多数对象都会继承Object{};佐证前面所学的对象内容),Node也并非顶层对象；Node--->>EventTarget{}; --->>Object{}; 】

(1).Document: 其是构造函数，但是不能手动操作new Document();此构造函数只能系统进行操作创建对象;document文档对象并不是该构造函数new出来的，而是其的子类HTMLDocument构造出来的，document--->>HTMLDocument-->>Document-->>Node-->>EventTarget{}; --->>Object{};document表示的就是文档对象，其有一系列方法来操作文档树上的节点，只不过有的是继承HTMLDocument,有的继承Document;

【Dom结构树中这类型的都是构造函数，其只能被系统进行创建对象】

document文档树(也可称为html结构树，也可称为dom树(document的简写))：文档内容有很多，其包括很多节点类型，例如元素节点、注释节点、文档节点等；这些节点其只是html结构中的元素而已，当通过DOM上的方法选择出来后其才是真正的对象，也称为Node对象/dom对象；如图的结构树中顶层的节点是document，文档结构树的最顶层就是document对象，再往上遍历便是null；(document对象和Document是通过原型链继承产生的联系，并非Document存在于document文档树顶层，文档树聚焦点是形成html结构)

(2).Element：文档树形成后，通过DOM上的方法可以操作树上的节点，聚焦到元素节点上，操作的前提便是获取到该元素，获取该元素后其便成为了dom对象，这些dom对象继承的是DOM结构树Element对象，这些对象调用属性和方法也是沿着原型链获取，若是后期自定义属性和方法，需要在原先链上编程，则必然是在Element上编程；误区：形成的dom元素对象其原型链继承并不是沿着document对象进行的继承，document对象是对节点进行系列操作(增/删/查/改)，而dom对象继承的是Element这条原型链上的属性和方法，有的继承HTMLElement,有些继承Element)

【同理：文档树中的其他节点例如:文本节点/注释节点，通过方法进行选中后成为dom对象，其是沿着-->>Text/Comment-->>CharacterDate 这条原型链继承的】

(3).Attr节点：表示XML/HTML属性，但它几乎从来不使用，因为可以通过Element原型链上的属性来确认dom元素的属性，同时其也可以自定义属性；

【综上：无论什么树，树上的都称为节点，文档树中document是节点，其也是元素节点】

3、dom元素系列操作：

(1).查找(选择)元素：可通过document对象的系列方法，同时也可通过节点/元素节点之间的相互关系进行查找；

[1].document.getElementById();//ie8以下不区分id大小写，并且也返回匹配 name属性的元素；

[2].document.getElementsByClassName();//ie8及以下没有该方法；

[3].document.getElementsByName();//只有部分标签含有name属性可生效(表单，表单元素，img，iframe,name属性常用于表单数据提交到服务器时的数据名，name的值不必唯一，表单中单选框、多选框按钮);

[4].document.getElementsByTagName();//所有浏览器都兼容；

[5].document.querySelector();//ie7及以下版本中没有；获取的元素是“副本”，操作不具有实时性；选择时等同于css选择器的方式；

[6].document.querySelectorAll();//ie7及以下版本中没有，同上；

【综上：除了ById();，querySelector();获取到的是单个对象，其他获取到的都是类数组，所以取值的时候要注意使用索引； document.querySelector("#box"); var div = document.getElementsByTagName('*')[0];】

【由于浏览器兼容性以及query两个方法的非实时性问题，获取dom元素使用document.getElementsByTagName();最合适】

【document获取body/head/html的方法与获取其他元素有些区别：document.body;document.head document.documentElement 代表着HTML】

querySelector();/ querySelectorAll(); 非实时性演示；

即使span.remove();再次打印依旧存在

通过节点相互关系进行查找元素：

[1].遍历节点：parentNode / childNodes / firstChild / lastChild / nextSibling / previousSlibing / childNodes.length;（所有浏览器都兼容）

[2].元素节点：parentElement / children / firstElementChild / lastElementChild / nextElementSibling / previousElementSibling; / children.length;（ie9以下只兼容children，其它都不兼容,ie再低的版本children也不进行兼容,后续需要封装函数）

【后续childNodes和children应用场景较多，其都是类数组,都是直接子节点，不包含孙子】

[3].nodeName;/nodeValue；//几乎不使用；nodeType使用场景很广泛，后期涉及处理元素节点兼容性问题；属性节点基本不使用,attributes:元素节点属性集合(类数组)；//很少使用；hasChildNodes();//判断是否有子节点，节点有很多类型，<div><div>//false; 但凡有空格，换行都会产生文本节点；(空格/换行-->>文本分隔符)