文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。HTML DOM 定义了所有HTML 元素的对象和属性,以及访问它们的方法,也就是说HTML DOM 是一套标准规则:关于如何获取、修改、添加或删除
HTML 元的,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问,DOM独立于具体的编程语言,可以用于
任何语言,xml,js,vbs,c,java,php等等,DOM操作实际上就是增删改查换element,text,attribute,comment(元素,文本,属性,注释),或者说对页面元素的增删改查操作以及获取,在JS中文档对象用关键字document表示
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的URL,如果当前文档不是通过超链接访问的,则为空.(例:来到A页面的方法:直接在地址栏中输入A的地址,从B页面左击A的链接,跳转至A页面,从B页面右击点击A的链接,在新窗口中打开,从B页面右击点击A的链接,在新标签页中打开,拖动A的链接至地址栏,拖动A的链接至标签栏,使用浏览器的前进、后退按钮)// 拓展:这个属性包含在消息报头里发送到服务器,可以用作判断流量来源.
title 返回当前文档的标题。
URL 返回当前文档的 URL。
body 返回body节点对象
domain 可返回下载当前文档的服务器域
cookie 设置或返回与当前文档有关的所有缓存。
在获取节点时注释也会当做节点,常用的有两种,总共12种,
1、nextSibling:获取指定节点的下一个兄弟节点, 获取第一个ul的下一个兄弟节点,会将文本、空格、换行符都作为文本处理
2、nodeName:获取指定节点的节点名称
3、nodeType:获取指定节点的节点类型,返回值是number,1表示元素节点;3表示文本节点(#text),兼容问题:IE9、safari、chrome、firefox会将元素节点后面的换行部分作为文本节点处理,可以通过nodeType查看类型
4、 nextElementSibling:获取指定元素的的下一个兄弟元素,兼容问题:IE6、7、8不支持
// 兼容性判断
if(uls[0].nextElementSibling){
uls[0].nextElementSibling;
}else{
uls[0].nextSibling;
if(uls[0].nextSibling.nodeType==1){
// 表示为一个元素节点
}
}
5、previousSibling:获取指定节点的上一个兄弟节点
6、previousElementSibling:获取指定元素的上一个兄弟元素, 如果不存在相邻的兄弟元素,那么会返回null
7、lastchild:获取最后一个子节点
8、lastElementChild:获取最后一个子元素
9、firstChild:获取第一个子节点
10、firstElementChild:获取第一个子元素
11、childNodes:获取所有的子节点,是一个节点集合,返回空数组(不存在时)
12、children:获取所有的子元素节点,没有兼容问题,强力推荐!!!
13、parentNode:获取父节点,一定是一个元素节点
14、document.documentElement:获取Html元素
15、document.body:获取body元素
16、document.head:获取head元素
17、hasChildNodes():判断指定元素或节点是否存在子节点,返回布尔值,存在返回true不存在返回false
元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点 Node.ENTITY_NODE(6)
处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点 Node.COMMENT_NODE(8)
文档节点 Node.DOCUMENT_NODE(9)
文档类型节点 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)
createElement():创建指定类型的元素,需要一个参数,标签类型的字符串
1、将元素添加到指定元素,appendChild():添加到指定元素的最后一个子级的末尾,document.body.appendChild(div);
innerHTML可以为指定元素添加子元素,但是必须以标签字符串的形式赋值才可以,如果不希望覆盖之前的内容,就需要用+=赋值,document.body.innerHTML +="
2、将指定元素插入到指定元素的前面:
元素1.insertBefore(元素2,y元素3)(前面)、元素1.insertAfetr(元素2,y元素3)(后面)
元素1:元素2与元素3的父级
元素2:即将要插入的元素,元素2 如果已经存在于页面,那么会将它从原本的位置移动带元素3前/后面
元素3:插入参照元素2
1、removeChild() 父级元素调用方法删除子级元素
2、remove() 子级元素调用方法,将自己从父级删除
3、innerHTML=""可以将指定元素所有子级元素删除
replaceChild(new,old) 需要由old元素的父级来调用,可以用new来替换old,被替换的元素会被删除,元素位置的替换, 此方法有返回值会将被替换的元素返回
cloneNode(boolean); 当参数为true时表示深克隆,false表示浅克隆
深克隆会将元素及内容都进行克隆,浅克隆只克隆元素,不会将内容克隆,克隆会将元素的属性一并克隆过来
setAttribute(属性名,属性值)增加或修改元素属性值
getAttribute(属性名)获取元素属性值,可以获取元素的行间属性以及我们为元素添加的自定义属性;而通过.语法不能获取自定义属性的值
removeAttribute(属性名)删除指定属性的值
clo2.setAttribute("myType","clone");
console.log(clo2.getAttribute("myType"))
clo2.removeAttribute("myType");