码迷,mamicode.com
首页 > 编程语言 > 详细

python学习_day55_前端基础之JS(3)

时间:2017-11-10 21:54:10      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:element   实例   ext   查找   ntc   节点   基础   first   logs   

  DOM(document object model)对象把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树),定义了访问和操作HTML文档的标准方法。

一、查找标签

1、直接查找标签

  总共有如下四种直接查找的方式:

document.getElementById(“idname”)                             //通过id名
document.getElementsByTagName(“tagname”)                      //通过标签名
document.getElementsByName(“name”)                            //通过name名
document.getElementsByClassName(“name”)                       //通过class名

  上述四种查找中,因为id的唯一性,得到结果就是对应标签对象。但是对于其他三种方式,因为其不唯一性,得到是包含满足条件的对象数组,通过数组索引可以取到相应的element对象,注意即使结果就一个对象,它也是一个对象数据。

<body>
<div id="div1">
    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>
/*通过document对象可以查找任何级别的对象*/
   var div1=document.getElementById("div1");
/*通过查找到的element对象(必须是id对象)查找其子级标签时,不支持通过id和name查找*/ //支持; var ele= div1.getElementsByTagName("p"); alert(ele.length); //支持 var ele2=div1.getElementsByClassName("div2"); alert(ele2.length); //不支持 var ele3=div1.getElementById("div3"); alert(ele3.length); //支持 var ele3_=document.getElementById("div3"); console.log(ele3_) //不支持 var ele4=div1.getElementsByName("yuan"); alert(ele4.length) //支持 var ele4_=document.getElementsByName("yuan") alert(ele4_.length) </script> </body> </html>

2、导航查找

  导航查找即是通过通过某个标签定位其他标签,主要属性如下:

‘‘‘
parentElement                                     // 父节点标签元素
children                                          // 所有子标签
firstElementChild                                 // 第一个子标签元素
lastElementChild                                  // 最后一个子标签元素
nexElementtSibling                                // 下一个兄弟标签元素
previousElementSibling                            // 上一个兄弟标签元素

‘‘‘

  实例如下:

<script>
   var ele1=document.getElementById("div1");
   var child=ele1.children;
   alert(child.length)  ;                               //结果为4,得到是一个对象数组
   var first=ele1.firstElementChild;
   console.log(first);                                  //得到第一个孩子对象:<div class="div2">i am div2</div>
   var last=ele1.lastElementChild;
   console.log(last);                                   //得到最后一个孩子对象: <p>hello p</p>

    var ele2=document.getElementById("div3");
    var parent=ele2.parentElement;
   console.log(parent);                                  //获得父级对象
    var next=ele2.nextElementSibling;
    console.log(next);                                   //得到下一个紧挨的兄弟对象:<p>hello p</p>
    var privous=ele2.previousElementSibling;
    console.log(privous);                                //得到上一个紧挨的兄弟对象:<div name="yuan">i am div2</div>

</script>

二、标签操作

1、文本操作

 

python学习_day55_前端基础之JS(3)

标签:element   实例   ext   查找   ntc   节点   基础   first   logs   

原文地址:http://www.cnblogs.com/seven-007/p/7816328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!