谈谈js中DOM,即文档对象模型

DOM即文档对象模型:建立DOM的目的就是为了你可以重构整个HTML页面,进行添加、改变、或重排页面上的项目。 看看最简单的html文件: html head titleDOM/title /head body h1hello phpddt.com/h1 pHel

DOM即文档对象模型:建立DOM的目的就是为了你可以重构整个HTML页面,进行添加、改变、或重排页面上的项目。
看看最简单的html文件:

<html>

<head>

<title>DOM</title>

</head>

<body>

<h1>hello phpddt.com</h1>

<p>Hello world!</p>

</body>

</html>

在看看下图:

未命名.jpg

很清晰的看到:根节点只有一个<html>,他有两个子节点:<head>和<body>,同理下面还有子节点!
既然你想对html页面进行重构,你就得获得节点的值,那么怎么获得节点的值呢?
(1)通过getElementById() 和 getElementsByTagName() getElementsByName()
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。注意返回的是一个值
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。注意返回的是一个数组
getElementsByName() 方法可返回带有指定名称的对象的集合。主要返回的是一个数组,从Element后面的s也能看出来!
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
从下面一个例子大家就能完全理解:
自己去测试下吧,从上面可以很容易看出三者的区别了!


<html>
 <head>
  <meta charset="utf-8">
  <title> php点点通-www.phpddt.com </title>
 </head>
<script>
 function getId(){
  $val = document.getElementById("myId");
  alert($val.innerHTML);
 }
    function getName()
   {
   var x=document.getElementsByName("myInput");
   alert(x.length);
   }
 function getTagName(){
   var x=document.getElementsByTagName("input");
   alert(x.length);
 }

</script>
 <body>
  <p id='myId'>这是对getElementById方法的演示</p>
  <input type="button" onclick="getId()" value="getElementById()测试"><hr>
  <input name="myInput" type="text" size="20" />
  <input name="myInput" type="text" size="20" /><br />
  <input type="button" onclick="getName()" value="getElementsByName()测试"><hr>
  <input type="button" onclick="getTagName()" value="getElementsByTagName()测试">
 </body>
</html>


(2)通过parentNode、firstChild 以及 lastChild ,在文档中进行“短距离的旅行”。


<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Untitled Document</title>  
        <script language="JavaScript">  
             function test1() {
                 var node = document.getElementById("imgid2");  
                 var pimg = node.parentNode.firstChild;
                 var inpu = node.parentNode.nextSibling;
                 alert(pimg.value);
                 alert(inpu.value);
             }
        </script>  
    </head>  
    <body>  
    <div>
        <a id ="aid">
            <img id ="imgid" value="img1" />
            <img id ="imgid2" value="img2" />
        </a>
        <input type="text" value="input"/>
    </div>
        <input type="button" value="GOGO" onClick="test1();" />  
    </body>  
</html>

 

 

 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

这里不能用css样式选择器选择input组件,设置 border:none;或border: 0px;outline:none;cursor: pointer; 亲测没有用处,只有写这种格式时生效,如下: input type=text style=border:none;
String对象的方法 方法一: indexOf() (推荐) var str = 123;console.log(str.indexOf(3) != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。 方法二: search() var str = 1
js代码部分: $(.aFileBtn).on(change,input[type=file],function(){ var filePath=$(this).val(); //filePath.indexOf(jpg)!=-1 || filePath.indexOf(png)!=-1 if(filePath.length 0){ $(.fileerrorTip).html().hide(); var arr=filePath.split(\\); var fi
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其实就是水平居中的意思,在这里说两个典型的错误引起的不能居中的问题: 1、
Dom元素 1 getElementById document.getElementById(id) 返回一个对象 2 getElementsByTagName document.getElementsByTagName(tag) 返回一个对象数组 运行使用*通配符,获取所有元素 dom.getElementsByTagName(*) 获取dom下所有子元素 3 getElementsByClass
li 元素中包含 a img 元素的时候会比较麻烦,需要注意,当然,问题还是一如既往的出现在 IE 下。以下为其中一例 ulliahref=#imgsrc=temp.jpg//a/liliahref=#imgsrc=temp.jpg//a/liliahref=#imgsrc=temp.jpg//a/liliahref=#imgsrc=temp.jpg//a/li/ulul{width: