一 DOM(文档对象模型)与BOM的区别
1.DOM 仅包含页面文档,而BOM提供了浏览器各个领域的脚本编程访问,包括按钮,标题栏以及页面的某些部分。
2.BOM专用于某个浏览器,浏览器是不被标准化的,因此,需要另一组属性,方法甚至对象,才能使用JavaScript操作他们;而DOM是独立于浏览器的来表示文档的方法。它允许开发人员通过一组通用的对象,属性和方法来访问文档,并通过脚本动态的修改网页内容。
二.DOM的树形结构导航
将DOM 视为一棵树,以层次方式导航。
创建树形结构的规则:文档就是根节点。节点只是树中的一个点,表示某个元素,元素的属性或者特性,或者元素包含的文本。
三.DOM的对象
基本的DOM对象:Node NodeList NamedNodeMap(允许按照名称而不是索引访问所有的Node对象。)
常用的DOM的对象:Document Element Node 。
四.Document对象
只有Document对象可以在页面上查找,创建和删除元素。
1.Document的方法
(1)getElementById(idValue):根据所提供的元素的id值,返回对该元素的引用(节点)。
注意:访问的每个元素都有id属性值。否则该方法返回null。
eg:
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<h1 id="Heading1">My Heading</h1>
<p id="Paragraph1">This is...</p>
<script type="text/javascript">
alert(document.getElementById("Heading1"));
</script>
</body>
</html>
结果返回一个h1对象的引用,可以利用这个引用修改h1的属性。
eg:
var h1Element=document.getElementById("Heading1");
h1Element.style.color="red";
(2)getElementsByTagName(TagName):根据所提供的标签名,返回多个元素,即返回一个包含多个元素的节点列表。
注意:该方法仍然只返回一个对象,但是该对象是一个元素集合。NodeList
读取NodeList中的元素对象:可以使用方括号加索引号;可以使用NodeList的item()方法。
eg:
var tdElement=document.getElementByTagName("td").item(0);
tdElement.style.color="red";
(3)createElement(elementName):使用指定标记创建一个元素节点,返回所创建的元素。
createTextNode(text):创建并返回包含所提供文本的文本节点。
2.Document的属性
documentElement:返回对文档最外层元素的引用(即根元素)。
五.Element对象
1.Element对象的属性
tagName:返回元素的标记名称。
2.Element对象的方法
(1)getAttribute(attributeName):返回所提供的属性的值。若该属性不存在,则返回null或者空字符串。
(2)setAttribute(attributeName,value):设置属性的值。
(3)removeAttribute(attributeName):删除属性的值,代之以默认值。
eg:
var pElementById=document.getElementById("paragraph1");
pElement.setAttribute("align","center");
alert(pElement.getAttribute("align"));
pElement.removeAttribute("align");
六.Node对象
1.Node对象的属性
firstChild lastChild previousSibling nextSibling ownerDocument parentNode nodeName nodeType(1表示元素,3表示文本) nodeValue
2.Node对象的方法
(1)appendChild(newNode):将一个新的节点加到子节点的末尾。返回追加的节点。
(2)cloneNode():返回当前节点的一个副本。注意:参数是一个布尔值,如果是true,则克隆当前节点及其子节点。否则,只克隆当前节点。
(3)hasChildNodes():是否有子节点。
(4)insertBefore(newNode,referenceNode):在reference指定的节点前,插入一个node对象,返回新插入的对象。
(5)removeChild(childNode):从node对象的子节点列表中,删除一个子节点,并返回删除的节点。