DOM的作用就是让我们通过DOM中的方法、事件来使对web页面的操作更加容易,那么,我们就来简要的了解一下DOM的基本方法。
一、对WEB页面中相应内容的查找。
有以下两个主要函数:getElementById("id名")和getElementsByTagName("标签名")他们分别通过id名和标签名来进行查找,函数的返回值为NodeList(节点列表),代码示例如下:
WEB页面代码
<html>
<head>
<title>Introduction to the DOM</title>
</head>
<body>
<h1>Introduction to the DOM</h1>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use</li>
<li class="test">It can help you</li>
</ul>
</body>
</html>
查找web内容代码
document.getElementById("everywhere")<!--查找id名为everywhere的web内容-->
document.getElementsByTagName("h1")[0]<!--查找标签名为h1的web内容-->
以上例子都是在整个web页面范围内寻找,若想要在指定上下文中寻找,即缩小查找范围,则通过传入上下文元素来实现,代码示例:
(elem||document).getElementsByTagName(name);<!--其中elem为上下文元素-->
那么我们为什么要查找这些内容呢,首先,可能是为了改变这些web内容的css格式呀。以下为示例代码,实现了对指定内容css格式的改变。
var li=document.getElementsByTagName("li");
for(var j=0;j<li.length;j++){
li[j].style.border="1px solid #000";
}
通过以上代码,将web页面中所有li标签内容加上了边框。
document.getElementById("everywhere").style.fontWeight='bold';
通过以上代码,将第一个li元素即id为everywhere的文本加粗。