DOM0(一)

DOM

dom(文档对象模型),是针对HTML和XML文档的一个API，IE中所有的DOM对象都是以COM对象的形式实现的

文档节点(document):是每个文档的根节点(最外层的节点),HTMl始终是元素.

node类型

node属性

DOM1定义了一个Node接口，每个节点都有一个nodeType属性(对应特定的值),

nodeName和nodeValue,nodeName属性为元素的标签名,nodeValue值始终为null。

childNodes属性为NodeList(类数组)对象,是基于DOM结构动态执行查询的结果,它是可变的,时刻把最新节点值返回出来,有性能问题可以通过childNodes[2] 和childNodes.item(2)取值

ownerDocument指向文档的文档节点(根节点). 所有节点属性如下图

操作节点的方法

appendChild()向childNodes 列表末尾添加一个节点。如果传入的节点已经是文档的一部分,则该节点从原来的位置转移到新位置.可以吧DOM树看成一系列指针连接起来的.

insertBefore() 接收两个参数,要插入的节点和作为参照的节点someNode.insertBefore(newNode,someNode.firstChild)

replaceChild() 接收两个参数,要插入的节点和要替换的节点,

removeChild() 只接收一个参数,为要移 除的节点.someNode.removeChild(firstChild)

注意:前面的四个方法都是操作某个节点的子节点,要操作这几个方法必须取得父节点。如果不支持子节点的节点调用这几个方法,会出错.

cloneNode() 只接收一个布尔参数,表示是否执行深复制，为true 为深复制,复制节点及其整个节点数；为false 为浅复制,只复制节点本身,复制后的节点没有父节点,要通过上述四个方法加载指定的父节点上。注意IE bug在复制的时候会复制事件处理程序.其它的不会.所以在复制前最好先移除处理程序

QQ截图20171223150524.png

Document类型

就是页面节点 有如下的属性

document 文档节点 最外层的节点 例如Html

body属性 var body = document.body; document.title;document.url;

获取域名document.domain；可以设置 跨域 进行页面跨域

获取链接到当前页面的页面地址,(前一个网页)document.referer

查找元素 document.getElementById() /getElementsByTagName(); 注意IE8不区分ID大小 只会返回第一个出现的

document.getElementsByTagName("img")取得一个nodeList

document.anchors,包含文本中所有带name 的 元素

document.links 包含文档中所有带href 的 元素

document.forms 包含文档中所有

元素

document.images 所有images元素

文档写入

document. write(),writeln(),open(),close() 把内容写到页面 写在里面

取得特性

getAttribute(),setAttribute(),removeAttribue().

注意: 1 特性名称不区分大小写 ,如是自定义特性应该在前面加上data- 前缀,

​ 2:只有公认的(非自定义的)特性才会以属性的形式添加到dom 对象中,如：

alert(div.id)  ==> myDiv   alert(div.align) ==> left 
alert(div.data_hello) ==》undefined 

但是有两类特殊的特性,他们虽然有对应的属性名,但属性的值与通过getAttribute() 返回的值并不相同,第一个是style ，第二个是style ,通过getAttribute() 得到是字符串.而通过属性访问(div.onclick)返回的是对象. 由于这些差距，开发人员经常不使用getAttribute() ,而是使用对象的属性,只有在使用自定义属性的时候才会使用getAttribute() ,div.setAttribute("id","test"),也可以div.id='test' 但是通过这种方式添加的自定义属性通过getAttribute() 也访问不到.如div.data-hello= "hello" ,div.getAttribute('data-hello') ==> null ,removeAttribute() 用于删除某个属性

关于attr() ,Attr 类型，特性节点，不认为是DOM 节点的一部分,操作Attribute 方法的多一些,较少引用attr ,div.attr(name,value),

创建新节点

1:创建元素

var div = document.creatElement("div") div.id = 'test';

2:创建文本节点

var textNode = document.createTextNode("helloworld")

DOM 操作是JS程序中开销最大的部分，NodeList是动态的,每次访问都要重新查询，最好减少DOM操作