JavaScript的DOM对象
DOM:document object model 文档对象模型
文档:超文本文档(html xml)
对象:提供属性和方法
模型:使用对象的属性和方法操作超文本文档
HTML:树形结构解析
----head
----title
---文本
----body
----span
----id
----文本
---------------------------------------------------------
document对象(整个文档)
id getElementById 通过id得到元素(标签)
name getElementByName() 通过name得到元素(标签)
TagName getElementByTagName() 通过TagName得到元素(标签)
document.opener() 得到创建此窗口的窗口,跨页面操作
案例介绍:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
1.获取到ul标签
getElementById(ul)
2.创建li标签
document.creatElement("标签名称")
3.创建文本
document.TextNode("文本内容")
4.把文本添加到li标签
li.appendChild(Text)
5.把标签添加到ul标签
ul.appendChild(li)
=================================================
element 元素对象
操作element对象,首先获取到element
====>>使用document方法。getElementBy...
方法:
eg.getAttribute(属性名称)
eg.setAttribute(属性名称,属性值)
eg.removeAttribute(属性名称)
============================================
Node对象属性
NodeName
NodeType
NodeValue
DOM解析html时需要把html里面的文件标签,文本,属性都封装成对象
案例介绍:
<span id="spanid">hhhh</span>
var span1=document.getElementById("spanid")
alert(span1.NodeName)
alert(span1.NodeType)
alert(span1.NodeValue)
---------------------------------------------------
var id1=span1.getAttribute("id")
alert(id1.NodeType)
alert(id1.NodeValue)
alert(id1.NodeName)
--------------------------------------------------
var text1=span1.firstChild;
alert(text1.NodeName)
alert(text1.NodeValue)
alert(text1.NodeType)
------------------------------------------------------
Node对象属性:
父节点 子节点 同辈节点
parentNode
ChildNode firstChild lastChild
nextSibling previouSibling 兄弟节点