js第十章DOM

1.dom节点

什么是dom?

• Document Object Model(文档对象模型）
• 将html文档或者xml文档描绘成有节点层次的结构，开发者可以通过操作节点来修改页面的某一部分；

节点层次

• 文档根节点 Document
• 文档元素 html html档中只有一个文档元素
• 每一个文档中的标记都可以通过一个节点表示

Node类型

• 所有节点都继承于Node接口
• Node中的常量在IE浏览器中无效

节点关系

• 文档中的所有节点均存在各种关系父子节点 兄弟节点
• 每个节点都有一个childNodes属性 （包含所有子节点）保存在NodeList对象中，NodeList对象类似于数组，可以通过【】下标来获取子节点。
  可以通过hasChildNodes()方法来判断有没有子节点比childNodes的length>0方便
• 每个节点都有一个parentNode属性（父节点），
  

操作节点

• appendChild() 在childNodes末尾添加节点 当增加完，动态的改变子节点的位置
• insertBerore(插入的节点，参照节点)
• replaceChild(newnode,替换的节点)
• removeChild(node) 删除节点

其他方法

• cloneNode(true) 参数是 true深克隆 子节点也会克隆
  false 只会克隆当前节点

2.Document文档节点

document对象 是HTMLDocument（继承Document）的实例，表示整个html,是window对象的属性

nodetype:9
nodeName:#document
nodeValue:null
parenNode:null

文档的子节点

• 可以是docuType element comment
• 访问子节点的方式

document.documentElement  指向HTML页面中的html元素
document.firstChild
document.childNodes[0]

document有一个body属性
document.body  

document..head
document.title
document.docuType

查找元素
document.getElementById()

document.getElementByClassName();
document.getElementByTagName();
document.getElementByName();

返回的是一个HtMLCollection 和nodeList对象相似，类似于数组，通过【】来获取

文档写入
docoment.write()

3.Element（元素节点）

nodeType:1
nodeName:元素的标签名字
nodeValue:null
parentNode:Document Element
childNodes:textNode 或 Element 或 Commrnt

• 获取节点名称
  Element.nodeName 或者 Element.TagName(返回的是大写，一般会toLowerCase())

HTML元素
常见的属性

className id title

var mydiv=document.getElementById("div");
mydiv.id
mydiv.className
mydiv.style.color

取得属性getAttribute()

• 获取自定义属性 gteAttribute (对象.属性不能获取自定义属性)
• 读取style 通过对象.属性 （getAttribute属性拿去到的是css文本）
• 读取onclick事件处理 通过对象.属性 (getAttribute 属性拿到的是 字符串)

var mydiv=document.getElementById("div");
   mydiv.getAttribute("data-m")

设置属性setAttribute()可以设置自定义属性 也可以设置特性属性

var mydiv=document.getElementById("div");
mydiv.setAttribute("data-m","2")

删除属性removeAttribute()
attributes属性

• 属性节点 保存在NamedNodeMap 类似于nodeList对象 通过【】获取属性

var mydiv=document.getElementById("div");
mydiv.attributes("id").nodeValue

创建元素

document.createElement()

元素的子节点

<ul>
  <li></li>
  <li></li>
</ul>

• ie浏览器解析为2个子节点 其他浏览器解析为4个节点 2个空文本节点
• 所以在操作时判断element.docuType===1 再进行操作

4.text文本节点

nodeType:3
nodeName:#text
nodeValue:文本节点的值
parentNode:Element
childNodes:0

创建文本节点

document.createTextNode("hello")

连接文本节点

normalize() 将两个文本节点合并成一个文本节点 

分割文本节点

splitText(count) 返回的从当前位置到末尾的文本

5.Attr属性节点

nodeType:2
nodeName:属性的名称
nodeValue:属性的值
parentNode:null

var mydiv=document.getElementById("div");
var newattr=document.createAttribute("id")
newattr.nodevalue="mm";
mydiv.setAttributeNode("newattr")