DOM基础

最新推荐文章于 2024-09-22 11:17:00 发布

zhaoxinglei0309

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量326

点赞数

文章标签： javascript button function xhtml 文档 input

本文链接：https://blog.csdn.net/zhaoxinglei0309/article/details/7299733

版权

文档对象模型(Document Object Model)，通常简称为DOM，是网站内容与JavaScript互通的接口。自JavaScript成为最常用的语言时JavaScript和DOM通常被视为独立的实体。DOM接口用于存取、遍历和控制HTML和XML文档。下面我们将简单的介绍一些JavaScript DOM的基本操作实例，包括建立、增加、删除、克隆、访问节点等等。

1. getElementById(id)

这是通过id来访问某一元素，最常用的之一

<html>

<body>

test

</div>

alert(document.getElementById("myid").innerHTML);

</script>

</body>

</html>

注意：如果元素的ID不是唯一，则会取得第一个该ID名称的元素

2. getElementsByName(name)

这是通过name来取得某一堆元素（作为数组），看 Element后面有个小s就知道了，ID是HTML文档中要求唯一的，name可以不是唯一，如checkbox、radio等地方会用到多个 input用同一个name来识别是否为同党。对了，getElementsByName(name)仅用于取得input、radio、 checkbox等元素，如<input name="myradio" type="radio" />。

3. getElementsByTagName(tagname)

看这方法就知道这也是取得某一堆元素（作为数组），是通过TagName也就是标签名来取得。你可以遍历这个数组获得每一个单独的元素。当一个DOM结构很大时，可以通过它来有效地缩小搜查范围。用DOM设置段落格式

</script>

</head>

属性：

nodeType 节点的类型常量值之一
nodeName 节点的名字；元素节点返回tagName，文本节点返回#text,属性节点返回属性名
nodeValue 节点的值；元素节点此属性为空，文本节点些属性即为节点中的字符串，属性节点返回属性值
childNodes 所有子节点的列表，是类数组对象，但并不是Array的实例，而且是动态变化的

parentNode 指向父节点

firstChild 指向在childNodes列表中的第一个节点
lastChild 指向在childNodes列表中的最后一个节点
事例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
   function getTest1(){
    //设置id=“test1”的对象的边框颜色是1像素的红色实线
    document.getElementById("test1").style.border="1px solid red";
}
//测试调用父对象
function setParent(){
   /*
   1、先获取一个父节点的对象
   2、使用parentNode获取父对象


   */
   var p1=document.getElementById("test1");
   //设置父节点的样式
   p1.parentNode.style.border="1px solid green";
   }
   function getFirst(){
    /*
   1、先获取一个父节点的对象
   2、使用firstchild获取第一个子节点


   */
   //获取一个有子节点的对象
    //var p=document.getElementById("test1");
    //取出子节点的值
    //alert("p节点类型"+p.nodeType);
    //alert(p.firstChild.nodeValue);
   // p2.lastChild.style.border="2px solid blue";
    //alert("p->firstChild节点类型"+p.firstChild.nodeType);

    var div=document.getElementById("test");
    alert(div.firstChild.nextSibling.tagName);
    }
</script>
</head>

<body>
<div id="test">
<p id="test1">这是一个p</p>
<p id="test2">这又是一个p</p>

</div>
<input type="button" value="测试getTest()" οnclick="getTest1()" /><br />
<input type="button" value="测试setParent()" οnclick="setParent()" />
<input type="button" value="测试getFirst()" οnclick="getFirst()" />
</body>
</html>