因为,核心DOM中,对节点的访问,都是从根节点开始的,访问方式十分麻烦。特别是当节点层次很深时,更是麻烦。因此,才有了HTMLDOM
1、HTMLDOM的新特性
每一个HTML标记,都对应一个对象。如:<img>标记,就是一个img对象。
每一个HTML标记的属性,与对应的元素对象的属性,一一对应。
<img>属性:src、width、height、border、style、title、id、class等。
在JS中,img对象属性:src、width、height、border、style、title、id、className等。
2、HTML DOM访问HTML元素的方法
(1)根据元素的id查找对象——document.getElementById(id)
(2) 根据HTML标签名找对象
描述:根据HTML标签名找对象
语法:var arr = parentNode.getElementsByTagName(tagName)
参数:
tagName就是要查找的标签名称,不能带尖括号。
parentNode代表上层节点。
返回值:返回一个对象数组。
举例:ulObj.getElementsByTagName(“li”)
<html>
<head>
<title>节点访问</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
</style>
<script type="text/javascript">
window.οnlοad= function(){
var imgObj = document.getElementById("img");
imgObj.src="001.jpeg";
imgObj.width="300";
imgObj.border="1";
imgObj.style="padding:10px;background:red;margin-top:10px;margin-left:100px";
imgObj.οnclick=show;
}
function show(){
var ulObj = document.getElementById("ul1");
//获取所有的元素
var lisObj = ulObj.getElementsByTagName("li");
for (var i = 0; i < lisObj.length; i++) {
// alert(lisObj[i].innerHTML);//双标签用innerHTML 单标签用Value
lisObj[i].innerHTML = lisObj[i].innerHTML+i;
lisObj[i].style="color:blue";
}
}
function test(obj){
alert(obj.value);
}
</script>
</head>
<body >
<img id="img" src="">
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<input type="button" name="开关" value="测试" οnclick="test(this)">
</body>
</html>
3.元素对象
tagName:与nodeName功能一样。
className:与class属性功能一样。
innerHTML:设置或读取某个标记中的所有内容,包括HTML文本。只能用于双边标记。
nodeValue:指纯文本。
offsetWidth:指元素的可见宽度,不含滚动条中的内容。只读属性。不带px单位。
offsetHeight:指元素的可见高度,不含滚动条中的内容。只读属性。不带px单位。
scrollWidth:指元素的总宽度,包含滚动条中的内容。只读属性。不带px单位。
scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。
scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。
如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。
scrollLeft:与scrollTop描述一样,只是向左滚动的距离。