HTML DOM
>DOM
HTML DOM：定义了访问和操作文档的标准方法。
HTML DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
通过代码级别去修改标签内容。
什么是DOM：
通过js可以重构整个HTML文档。可以添加、移除、改变、或者重排页面上的项目。
需要页面上的某个东西，JS就需要获得对HTML文档中所有元素进行访问的入口。这个入口连同对HTML元素进行添加、移除、改变或移除的方法和属性，都是通过文档对象来获得的。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
HTML DOM节点
节点
html文档中的每个成分都是一个节点。
●Document：整个文档是一个文档节点
●Element：每个 HTML 标签是一个元素节点
●Text：包含在 HTML 元素中的文本是文本节点
●Attribute：每一个 HTML 属性是一个属性节点
●Comment：注释属于注释节点
Node层次
节点彼此之间都是有等级关系的。
所有的节点组成文档书(节点树)。HTML文档中的每个元素、属性、文本都代表着树中的一个节点。树起始于文档节点，并且由此伸出枝叶，直到树最低几倍的文本节点为止。
形成节点树。
获取Element对象：
1、获取Element对象
●getElementById("id")根据id属性值获取元素对象。id属性值一般唯一
●getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
●getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
●getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
●通过使用一个元素节点的parentNode、firstChild、lastChild 属性。childNodes
var divs = document.getElementsByTagName("div"); alert(divs); //[object HTMLCollection] alert(divs.length); //5 alert(divs[0]); //[object HTMLDivElement] alert(divs[1]); var div_cls = document.getElementsByTagName("cls1"); alert(div_cls); var ele_username = document.getElementsByName("username"); alert(ele_username); //[object NodeList] alert(ele_username[0]); //[object HTMLInputElement] alert(ele_username[1]);
2、创建其他DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
附注：
document.getElementById('maindiv').getElementsByTagName("p");
返回所有 <p> 元素的一个节点列表(数组)，且这些 <p> 元素必须是 id 为 "maindiv" 的元素的后代：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
找到带有指定 id 的节点，然后移至其父节点并执行 removeChild() 方法。
根节点：
访问根节点
●document.documentElement ==》<html>文档根节点
●document.body ==》<body>
Elemet：元素对象
1、获取/创建：通过document来获取和创建
2、方法：
1）removeAttribute()：删除属性
2）setAttribute()：设置属性
附注：
innerHtml <h1 id="xx"><b>一个标题</b><h1> 即：h1标签中的全部内容：<b>一个标题</b>
innerText 只要标签中的文本内容：一个标题
使用innerText设置值，不会去解析标签，会原封不动地显示出来。
属性及方法：
Node：节点对象，其他5个的父对象
特点：所有dom对象都可以被认为是一个节点
方法：
CRUD dom树：
appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild() ：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。
属性：
parentNode 返回节点的父节点。
附注：
innerHtml <h1 id="xx"><b>一个标题</b><h1> 即：h1标签中的全部内容：<b>一个标题</b>
innerText 只要标签中的文本内容：一个标题
使用innerText设置值，不会去解析标签，会原封不动地显示出来。
HTML DOM节点信息
节点信息：
每个节点都拥有包含关于节点某些信息的属性。这些属性是：
●nodeName 节点名称
●nodeValue 节点值
●nodeType 节点类型
nodeName
nodeName属性包含某个节点的名称
●元素节点的nodeName是标签名称
●属性节点的nodeName是属性名称
●文本节点的nodeName永远是#test
●文本节点的nodeName永远是#document
nodeValue
对于文本节点，nodeValue属性包含文本。
对于属性节点，nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。
nodeType
可返回节点的类型。
元素——1
属性——2
文本——3
注释——8
文档——9
内置对象，由js的解析器创建。
Document对象
Documennt对象集合：
all[] 提供对文档中所有HTML元素的访问。
anchors[] 所有Anchor对象的引用
applets 所有Applet对象的引用
form[] 所有Form对象引用
images[] 所有IMage对象引用
links[] 所有Area和Link对象引用
属性：
body 对<body>元素的直接引用
cookie 当前文档相关的所有cookie
domain 当前文档域名
lastModified 最后修改的日期和时间
referrer 载入当前文档的文档的URL
title 文档的标题
URL 当前文档的URL
方法：
close 关闭document.open()方法打开的输出流，并系那是选定的数据
getElemetById() 对拥有指定id的第一个对象的引用
getElementByName() 带有指定名称的对象集合(当然是有name属性的标签，如表单类的)
getElementByTagName() 指定标签名的对象集合
open() 打开一个流，以收集来自任何document.write()或document
write() 向文档写HTML表达式或JS代码
writeln() 在上述write表达式后写一个换行符。
附注：
HTML Document接口对DOM Document接口进行了扩展，定义HTML专用的属性和方法。
write方法，在文档载入和解析的时候，允许一个脚本向文档中插入动态生成的内容。
附注：
HTML DOM Style对象
代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
document.getElementById("id").style.property="值"。==》来访问到CSS属性组，进而设置相关的CSS属性。
两者大致相同。
浙公网安备 33010602011771号