JavaScript 2 DOM
注:在下文中,汉字代表变量,英文单词时关键字。如 document.getElementById(参数)
1.DOM(document object model)文档对象模型
HTML DOM 定义了所有 HTML元素的对象和属性,以及访问它们的方法。
2.节点(node)
根据 W3C 的 HTML DOM 标准,HTML文档中的所有内容都是节点:
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
······
通过 HTML DOM,树中的所有节点均可通过JavaScript进行访问。所有HTML元素(节点)均可被修改,也可以创建或删除节点。
3.节点类型(任何节点必居其一),可通过查询节点的nodeType属性得知。
元素节点 | 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) |
例如:
if(节点.nodeType == 1){···}
注:最好不写成“节点.nodeType == Node.ELEMENT_NODE”,在IE中不支持。
4.节点nodeName和nodeValue属性
常用节点 | 元素 | 属性 | 文本 | 注释 |
nodeName节点名 | 标签名 | 属性名 | #text | #comment |
nodeValue节点值 | null | 具体属性值 | 具体文本 | 注释内容 |
例如:
if(节点.tagName.toLowerCase() ==“div”){}
注1:访问元素的标签名,可以使用nodeType,也可以使用tagName(为了清晰起见)。
注2:因为在HTML中,tagName结果是大写;在XHL(有时包括XHTML),结果与源代码保持一致,为了适用于任何文档,用toLowerCase()方法转换为小写。
5.节点的通用属性与方法
①通用属性
子节点.parentNode | 指向其父节点 |
父节点.childNodes | 指向其子节点数组 |
子节点.ownerDocument | 指向其文档节点,通常是document |
子节点.priviousSibing(sib亲戚) | 指向其上一个同胞节点 |
子节点.nextSibing | 指向其下一个同胞节点 |
父节点.firstChild | 指向其第一个子节点 |
父节点.lastChild | 指向其最后一个子节点 |
每个节点都有一个childNodes属性,里面保持着Noselist对象,是一组有序子节点。
使用方法:
var x = 父节点.childNodes[0]; //x=第一个子节点
var x = 父节点.childNodes.item(0); //x=第一个子节点
var y = 父节点.childNodes.length; //y=子节点数目
②通用方法
格式 | 描述 | 返回值 |
父节点.appendChild(新子节点) | 把新子节点加到父下子节点的末尾 | 新子节点 |
父节点.insertChild(新子节点,旧子节点) | 把新子节点加到父下旧子节点之前 | 新子节点 |
父节点.replaceChild(新子节点,旧子节点) | 用新子节点替换掉旧子节点 | ??? |
父节点.removeChild(旧子节点) | 移除旧子节点 | 旧子节点 |
6.document类型节点
①JavaScript通过document类型表示文档,代表整个HTML页面。
其子节点可能是DocumentType(最多一个),Element(最多一个),ProcessingInstruction或Comment。
②常用属性和方法:
var x = document.documentElement; | x = html节点 |
var x = document.body; | x = body节点 |
var x = document.getElementById(“aBC”) | ID名必须严格匹配,包括大小写 |
var x = document.getElementByTagName(“p”) | 返回一个类数组集合 |
③一些特殊的属性:
var x = document.anchors; | x = 所有带name属性的<a>元素 |
var x = document.links; | x = 所有带href属性的<a>元素 |
var x = document.forms; 与document.getElementByTagName(“forms”)结果相同 | x = 所有的<forms>元素
|
var x = document.images; 与document.getElementByTagName(“img”)结果相同 | x = 所有的<img>元素 |
7.Element类型节点
①访问元素
document.getElementById() //是document对象特有函数,只能是document.
节点.getElementsByTagName() //节点可以是document,也可是其他。返回对象数组。
节点.getElementsByClassName() //同上,是HTML5 DOM新增的,可能不适用于老浏览器
注1:ID名必须严格匹配,包括大小写
注2:getElementsByTagName()和getElementsByClassName()允许使用通配符”*”,表示全部
例如1:
var x = document.getElementById(“abc”);
var y = x.getElementByTagName(“li”); //在x元素里搜寻li元素
例如2://适用于新老浏览器的函数方法,node搜寻范围,theclassname要找的类名
function getElementsByClassName(node,theclassname){
if(node.getElementsByClassName){
//使用现有方法
return node.getElementsByClassName(theclassname);
}
else{
var results = new Array();
var elems = node.getElementByTagName(“*”); //得到全部标签
for ( var i=0;i<elems.length;i++){
//当元素的类名(className)与要找的类名(theclassname)匹配时
if(elems[i].className.indexOf(theclassname)!=-1){
resulus[results.length] = elems[i]; //随着赋值操作,resules.length不断增加
}
}
return resules;
}
}
②查询,设置,移除属性
属性是元素所特有的,属性的操作对象只能是元素
元素.getAttribute(“属性名”) //返回属性值
元素.setAttribute(“属性名”,”属性值”)
元素.removeAttribute(“属性名”) //删除属性及属性值。
注1:setAttribute(),若属性不存在,创建该属性并设置值;若属性存在,替换属性值。
注2:removeAttribute(),IE6及以前版本不支持
例如:
<div id=”myDiv” class=”bd” title=”Body text” lang=”en” dir=”ltr”></div>
var div=document.getElementById(“myDiv”);
div.getAttribute(“class”) //”bd”
div.className //”bd”
div.setAttribute(“id” , “abc”) //id属性名改为abc
div.id=”abc”; //id属性名改为abc
问题??? 可以用div.className查询,div.id=”abc”设置,getAttribute和setAttribute没什么用??? 解释: DOM操作分为3个方面,即DOM Core(核心),HTML_DOM和CSS_DOM。 DOM Core的方法: document.getElementsByTagName("form"); 元素.getAttributes("src"); HTML_DOM的方法: document.form; 元素.src; CSS_DOM的方法: 元素.style.color="red"; |
③元素的attributes属性
格式:元素.attributes
返回:元素的属性集合
使用://在历数元素属性时常用
var elem=document.getElementById(“header”);
for(var i=0;i<elem.attributes.length;i++){
xxx = elem.attributes[i];
}
拥有以下方法:
getNamedItem(name) | 返回名为name的节点 |
removeNamedItem(name) | 移除名为name的节点 |
setNamedItem(name) | 添加名为name得到节点 |
item(pos) | 返回位于数字pos位置处的节点 |
范例:
<div id=”myDiv” class=”bd” title=”Body text” lang=”en” dir=”ltr”></div>
var div=document.getElementById(“myDiv”);
var x = div.attributes.getNamedItem(“id”).nodeValue; //x = “myDiv”
var x = div.attributes[“id”].nodeValue; //x = “myDiv”
var x = div.getAttribute(“id”) //x = “myDiv”
var x = div.id; //x =“myDiv”
div.attributes.getNamedItem(“id”).nodeValue = “someOhterId”; //id=“someOhterId”
div.attributes[“id”].nodeValue = “someOhterId”; //id =“someOhterId”
div.getAttribute(“id”) = “someOhterId”; //id =“someOhterId”
div.id = “someOhterId”; //id = “someOhterId”
④创建元素
document.createElement(“标签名”)
⑤元素的子节点
在不同浏览器中,子节点的数目可能不同。例如:
<ul id=”myList”>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
在IE中,ul包括3个子节点,3个li。
在其他浏览器中,ul包括7个子节点,3个li,4个文本(有一个空白符)
所以在操作前,通常检查nodeType属性。
if(元素.childNodes[i].nodeType == 1)
8.Text类型节点
① 创建文本节点
document.createTextNode(“文本内容”)
9.向 HTML DOM添加新元素。
首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
实例:
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
10.innerHTML属性,可以向HTML中写入/读取内容。
范例一,读取:
<div id=”textdiv”>
<p id=”p1”>This is <em>my</em> content.</p>
</div>
var x = document.getElementById(“textdiv”);
alert(x.innerHTML);
结果显示:
<p id=”p1”>This is <em>my</em> content.</p>
解释:
innerHTML属性无细节可言,要想获得细节,需要使用DOM方法和属性。
范例二,写入: //适用于将大段HTML内容插入网页
document.getElementById(“textdiv”).innerHTML=”<p id=”p1”>This is <b>my</b> content.</p>”;
document.getElementById(“p1”).innerHTML= ”Hello World!”;
注:使用这个技术无法区分“插入一段HTML内容”和“替换一段HTML内容”。
11.改变样式,格式:
document.getElementById(id).style.property=新样式
范例:
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
12.事件
HTML 事件的例子:
当用户点击鼠标时:onclick事件
当用户进入或离开页面时:onload 和 onunload 事件
当鼠标移动到/离开元素时:onmouseover和onmouseout
当输入字段被改变时:onchange 事件