DOM (Document Object Model)文档对象模型,将html文档以及文档中的内容转换成node接口,以便外部(如js)操作(如修改html内容等)。
node节点的类型:
DocumentType(如下)、
Document(一个文档对应一个对象)、
Element(html、head、body等)、
Text(html文档中,标签之间,如下的div1和divc1之间虽然看着没有什么,其实是有一个内容为''的Text节点)
Attribute(标签的属性,如id=”div1“就是一个属性节点)
Comment(注释)
DocumentFragment (没见过)
<!DOCTYPE html> DocumentType <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="div1"> <div class="divc1"> <div id="div"> 文本节点 </div> <!--注释--></div> </div> </body> </html>
DOM是浏览器对外提供的一个编程接口,包含的接口中我们要用到的关系如下:
NodeList
HTMCollection
Node
Document
Element
Attr
Attr的使用是在Element中有个attributes属性,返回一个类数组,里面的对象都是Attr。
这里需要注意的是Node和Element连个接口,我们在前端开发中使用js操作html标签对应的对象,使用的都是Element接口的属性和方法(自己这样认为)。
更多见:http://www.w3help.org/zh-cn/causes/SD9024
http://javascript.ruanyifeng.com/dom/element.html(新地址:https://wangdoc.com/javascript/)
Node接口的属性与方法:
属性:
nodeType
nodeName
nodeValue
textContent
nextSibling
previousSibling
firstChild
lastChild
childNodes
parentNode
parentElement
ownerDocument
baseURI
方法:
appendChild()
insertBefore()
replaceChild()
removeChild()
contains()
normalize()
compareDocumentPosition()
cloneNode()
hasChildNodes()
isEqualNode()
Element:
getAttribute(name)
setAttribute(name,value)
removeAttribute(name)
getElementsByTagName()
getElementsByClassName()
getElementById()
Document:
HTML:
HTMLDocument:
title,referrer,URL,domain,body,images,applets,forms,links,anchors,cookie
open(),close(),write(),writeln(),getElementsByName()
HTMLElement:
id,title,lang,dir,className