DOM对象的简单操作

来源：互联网发布：centos部署web项目编辑：程序博客网时间：2024/05/16 08:52

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的文本加粗。

0 0