DOM
dom(文档对象模型),是针对HTML和XML文档的一个API，IE中所有的DOM对象都是以COM对象的形式实现的
文档节点(document):是每个文档的根节点(最外层的节点),HTMl始终是<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的<a>元素
document.links包含文档中所有带href的<a>元素
document.forms包含文档中所有<form>元素
document.images所有images元素
文档写入
document.
write(),writeln(),open(),close()把内容写到页面 写在<script></script>里面
取得特性
getAttribute(),setAttribute(),removeAttribue().注意: 1 特性名称不区分大小写 ,如是自定义特性应该在前面加上
data-前缀, 2:只有公认的(非自定义的)特性才会以属性的形式添加到
dom对象中,如：<div id="myDiv" align="left" data_hello="hello"> 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("<strong>hello</strong>world")
DOM 操作是JS程序中开销最大的部分，NodeList是动态的,每次访问都要重新查询，最好减少DOM操作
网友评论