Dom深入浅出

Dom1级提供了一个Node接口，该接口将由Dom中所有节点类型（包括元素节点、文本节点、属性节点等12种）实现，而js是作为Node类型来实现的，js中的所有节点类型的继承自Node类型，

所以它们拥有一些相同的基本属性和方法。（备注：12种类型节点中并不是所有节点都受到Web浏览器的支持，开发人员最常用的就是元素和文本节点）

如nodeType、nodeName、nodeValue属性（备注nodeName、nodeValue这两个属性值完全取决于节点类型，对元素节点来说，前者显示标签名,后者始终未null）。

节点关系：和家谱相似

每个节点都有一个childNodes属性,返回一个NodeList对象，该对象长的和数组一样.别且也有length属性返回子元素个数，访问子元素的方法有两种：[index]或者.item(index)

这里有一个坑需要注意：childNodes返回的是所有节点，包括文本节点，最坑爹的是空格也算是文本节点。所以不要使用这个属性。建议用children属性，只返回子元素节点。

 

Node类型：
1、nodeType、nodeName、nodeValue属性：不同节点类型的这几个属性的值都不一样。
2、节点关系(下面这些都是属性，相当于关系指针)：
childNodes（所有子节点，可能不是元素节点，NodeList类型，可以用[索引]和item(索引)来访问）；
parentNode(父节点，一般为元素节点)；
previousSibling(上一个同胞节点)
nextSibling(下一个同胞节点)
firstChild(第一个孩子节点)
lastChild(最后一个孩子节点)
3、操作节点：
appendChild(dom对象) 如;fatherNode.appendChild(sonNode)
insertBefore（newNode,nowNode） //在nowNode节点前插入一个newNode节点
replaceChild(nowNode,oldNode) //将oldNode节点（Dom对象）替换成newNode节点
removeChild(node) //移除node节点
（备注：上面这些方法都是由父节点调用的，并且如果新增的节点是页面原有的只会移动不会新增（同一个指针或节点不可能出现在页面的多个地方）移动后相对关系改变）
4、其它方法
cloneNode() //接受Boolen类型值 true表示深复制（后代节点也复制） false表示浅复制（只复制当前节点）
normalize() 处理文本节点用的 空文本节点删除 相邻的文本节点合并

 

节点类型共有12中（都继承自Node类型），这里介绍几种常用的节点类型：
Document类型
document(是HtmlDocument的实例，该类型继承自Document)表示整个文档，是dom树中的根节点，也是window对象的一个属性，所以可以当做全局变量使用
(特点：nodeType:9 nodeName:#document nodeValue:null parentNode:null)
document.documentElement属性始终指向：html元素节点
document.body指向body
文档信息：
document.title指向title的内容（字符串类型，可修改）
document.URL 当前页面完整的URL
document.domain当前页面的域名

查找元素：
getElementById("id") //返回指定id的Dom对象
getElementsByTagNmae("div") // 返回指定标签名的HTMLCollection对象（和NodeList对象差不多），*表示所有元素。
getElementsByName("name值") //HTMLCollection对象
getElementsByClassName("className") //（扩展的方法）HTMLCollection对象

文档写入：
document.write("哈哈哈")
document.writeln("呵呵")； //有换行

Element类型：
特征：ndoeType:1 nodeName:元素的标签名 nodeValue:null parentNode:document或Element
Html元素：HTMLElement类型（继承自Element类型）对象，HTMLElement类型添加了一些属性（每个html元素都存在的特性）：id title lang dir className
取得特性：setAttribute("data-name","lxf") 设置特性：p.getAttribute("data-name") 移除特性：p.removeAttribute("data-name") 特性可以是标准的也可以是自定义的。
attributes属性（Element节点才拥有的）：返回的NamedNodeMap类型（和NodeList差不多）对象，（该对象有一些方法，在此不细说）
创建元素节点：vat div=document.createElement("div"); //返回一个Elemen类型节点的Dom对象
此时，还可以设置新创建元素的特性：div.id="" div.className="" 。要将新创建的元素添加到Dom树中，可以使用操作节点的方法：appendChild insertBefore等
元素的子节点：childNodes属性（可能是元素 文本 注释等节点）。备注：元素节点也是支持 隔天ElementsByTagName("li") 方法的 在后代元素中寻找相同标签名的元素

Text类型：
特征：nodeType:3 ndoeName:#text nodeValue:节点包含的文本（和这个属性等价的是data属性） parentNode：是一个Element 不支持（没有）子节点
操作节点中文本的方法有：
appendData(text) //将text添加到节点的末尾
deleteData(start,count) //start位置开始，删除count个字符
insetData(start,text) //在start位置插入text
replaceData(start,count,text) //用text替换从start开始到start+count为止 的字符
。。。

文本节点的length属性 保存着文本节点字符长度（和nodeValue.length、data.length的值相等）

创建文本节点：var txtNode=document.createTextNode("还好啊"); 将创建的文本节点添加到Element节点中去：var divNode=document.createElement("div"); divNode.appendChild(txtNode); document.body.appendChild(divNode);

规范化文本节点：elementNode.normalize();

Comment类型：
特征：ndoeType:8 ndoeName:#comment nodeValue:注释的内容 parentNode：Document或Element
Comment类型与Text继承自相同的基类，用法同Text类型节点。

 

 

Dom扩展：
选择器Api：
.querySelector("css选择器") //返回匹配的第一个元素 如果没有匹配元素 返回null
.querySelectorAll("css选择器") //返回匹配的所有元素 NodeList对象

元素遍历（防止空格当做文本节点）：
childElementCount //返回子元素的个数
firstElementChild //第一个子元素 firstChild的元素版 firstChild是节点版
lastElementChild //最后一个子元素 lastChild的元素版
previousElementSibing //指向前一个同辈元素 previousSibing元素版
nextElementSibing //指向下一个同辈元素 nextSibing元素版

Html5中扩展的js APi：
getElementsByClassName("clssName")
classList属性（DomTokenList类型 和NodeList差不多）：该类型对象拥有下面一些方法：
add(value) 添加类型 如果已经存在就不添加啦
contains（value） 判断是否包含该类型 包含返回true 否则返回false
remove(value) //去除每个class
toggle(value) //有 删除；无 添加

焦点管理：
document.activeElement始终指向页面中获得焦点的Dom对象 默认是 body哦

元素获得焦点的方式一般有：页面加载、用户输入、在代码中调用focus();
自定义数据属性：以 data- 开头 随便命名
<p id="hh" class="gg" name="ss" data-name="苏州" data-id="123">我也是p3333</p>
可以通过Dom对象的dataset属性访问，var p=document.getElementById("hh"); p.dataset-name //苏州 p.dataset.id //123 注意没有data- 前缀

插入标记：innerHtml innerText

专用扩展：
children 属性 返回的是 子元素
contains()方法 调用该方法的是祖先节点 参数是后台节点 判断一个节点是不是在某个节点下面 是返回true

 

补充：

对于最常用的元素节点类型来说（即 我们一般获取到的Dom元素对象）：它们 都是继承自HTMLElement或通过其他更具体的子类间接继承。

所以所有的dom元素对象都共拥有一些属性（HTMLElement类型的）：id、title、className、dir、lang

<div class="test" title="i am title" id="tId"  dir="ltr" lang="en"></div> 

var test=document.getElementById("tId");

var title=test.title 

var id=test.id

var className=test.className

...

当然某些Dom元素对象拥有一些其它Dom元素对象没有的属性：

如：

img标签的 Dom对象 继承自HtmlImageElement这个具体的类型。

所以它具有src属性 <img src="1.jpg"  id='img1'/>

var src=document.getElemenetById("img1").src;  // 1.jpg

再如：input 继承自HtmlInputElement类型 具有checked属性

<input type="radio" name="sex" id="meal" value="男">男

var isMeal=document.getElementById("meal").checked; // true or false 

原因：每种元素的 公认特性会被添加到Dom对象的属性中，私有特性除外。