导航标签的方法：

 一 , 全局导航:

1.通过by id导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <div id="div2">hello div</div>
        <p id="p1">hello p</p>
    </div>
</body>
<script>
    var ele=document.getElementById("div1").firstElementChild; //获得element div1的标签下的第一个element标签；div
    alert(ele.nodeName);                                       // alert name 属性   p
    alert(ele.nodeType);                                       // alert type 属性   1
    alert(ele.nodeValue);                                      // alert value 属性  null

    var ele1=document.getElementById("div2").nextElementSibling; //获得 element div1 的下一个兄弟标签； p = nodeName
    var ele2=document.getElementById("p1").previousElementSibling; //获得 element p1 的上一个兄弟标签； div = nodeName
    var ele3=document.getElementById("div1").lastElementChild; //获得 element div1父亲下的子标签的最后一个； p = nodeName
    var ele4=document.getElementById("div2").parentElement; //获得 element div2的子标签的父级标签； div = nodeName

    var ele5=document.getElementById("div1").children; //获得 element div1 下的所有标签，并组成一个数组；element；
    alert(ele5.length)                                 //获得 div1下的element 标签个数； 2
    alert(ele5[0].nodeName)                                 //获得 div1下的数组第一个标签的名字；div
    for (var num=0;num<ele5.length;num++){
        alert(ele5[num].nodeName)
    }                                                      //for循环出数组ele5里的标签名 div p
</script>
</html>
===============================================================================================================

2.通过by class导航
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">hi div
        <div class="div2">hello div1</div>
        <p>hello p!</p>
        <div class="div2">hello div2</div>
    </div>
    <script>
        var ele=document.getElementsByClassName("div2")[0]; //找出class叫DIV2的所有标签,并且取这个数组的第一个.<div class="div2">hello div1</div>
        var ele1=ele.nextElementSibling;                  //找出刚才找到的标签的下一个element标签.  <p>hello p!</p>
        alert(ele1.innerHTML)                                  //打印他的标签的文档    hello p!
    </script>
</body>
</html>

=================================================================================================================================================
3.通过by tag导航


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="div1">hi div
        <div class="div2">hello div1</div>
        <p>hello p!</p>
        <p>hello pppp!</p>

        <div class="div2">hello div2</div>
    </div>

</body>
<script>
    var ele=document.getElementsByTagName("p"); //得到叫p标签的所有数组
    alert(ele[1].innerHTML);           //获取此数组里第2个P标签的文档  hello pppp!
    var ele1=document.getElementsByTagName("div"); //得到叫p标签的所有数组
    alert(ele1[1].innerHTML);                      //获得的是 <div class="div2">hello div1</div> 这个标签里的hello div1
    alert(ele1[0].innerHTML);                      //如果要获得hi div 用查找数组第一个是不可能的.因为会把hi div后的所有在此标签里的内容看做文本打出来   ########

</script>
</html>


=================================================================================================================================================
3.通过by name导航


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="div1">hi div
        <div class="div2" name="org">hello div1</div>
        <p id="P1" name="org">hello p!</p>
        <p>hello pppp!</p>

        <div class="div2">hello div2</div>
    </div>

</body>
<script>
    var ele=document.getElementsByName("org"); //得到name叫org标签的所有数组
    alert(ele[0].innerHTML);                    // 找出第一个org的标签的文档  hello div1
    alert(ele[1].innerHTML);                    // 找出第一个org的标签的文档  hello p

</script>
</html>

===================================== 注: 只有id这个属性是唯一的 ,查找出来的不是数组,其他的方法都需要用数组分析数据 !!=======================================

二, 局部导航


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>hello div
        <p>hello p</p>
        <div class="div1">hello div1
            <div>hello div2</div>
        </div>
    </div>
    <script>
        var ele=document.getElementsByClassName("div1")[0];   // 获得 class 叫div下的的标签数组的第一个  全局查找
        alert(ele.innerHTML);                                  // 得到的是标签里包含的所有内容 包括子级标签!
        var inner=ele.getElementsByTagName("div")[0];         //获得里面的第一个div标签                  局部查找
        alert(inner.innerHTML);                                // 获得的是 hello div2
    </script>
</body>
</html>
============================ 注: 局部查找这个例子里用的是CLASS属性,还可以用的是getelementbytagname,  byname 和 byid 都不能用 !==================================================

js 标签属性与导航的更多相关文章

  1. Js与标签属性

    关于在JS中设置标签属性 2017-10-09 23:04 by 清风221, 12790 阅读, 0 评论, 收藏, 编辑 Attribute 该属性主要是用来在标签行内样式,添加.删除.获取属性. ...

  2. 关于在JS中设置标签属性

    Attribute 该属性主要是用来在标签行内样式,添加.删除.获取属性.且适用于自定义属性. setAttribute("属性名",属性值“”):这个是用来设置标签属性的: re ...

  3. JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型

    基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...

  4. js拼接url以及为html某标签属性赋值

    记录 js拼接url 比如有些时候我们需要为某按钮实现跳转,可以利用下面的方式做到: function ReturnIndex() { var rex = RegExp("tools&quo ...

  5. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

  6. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  7. html标签属性（attribute）和dom元素的属性（property）

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  8. Html 改变原有标签属性

    内容简要: 当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签 例:当订单状体编程已支付的时 ...

  9. 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码  <au ...

随机推荐

  1. 【bzoj4514】: [Sdoi2016]数字配对 图论-费用流

    [bzoj4514]: [Sdoi2016]数字配对 好像正常的做法是建二分图? 我的是拆点然后 S->i cap=b[i] cost=0 i'->T cap=b[i] cost=0 然后 ...

  2. Laravel-安装composer

    一.系统环境   Laravel框架有些系统上的要求,因此需要保证自己运行环境.要求的环境有:对于PHP的版本要求比较法高,其他的是扩展,可以在php.ini文件中开启 PHP >= 5.5.9 ...

  3. c#优秀文章

    文件传输示例]C# WinForm WebSocket (非浏览器):http://bbs.cskin.net/thread-4431-1-1.html NanUI for Winform发布,让Wi ...

  4. c#几种数据库的大数据批量插入（SqlServer、Oracle、SQLite和MySql）

    这篇文章主要介绍了c#几种数据库的大数据批量插入(SqlServer.Oracle.SQLite和MySql),需要的朋友可以了解一下. 在之前只知道SqlServer支持数据批量插入,殊不知道Ora ...

  5. vue 在路由中复用组件

    首先需要在app.vue中引入: <template> <div id="app"> <!--<app-header></app-h ...

  6. yyy的python3第八天学习

    望着小月亮:https://www.cnblogs.com/triple-y/ 请尊重原创:https://www.cnblogs.com/triple-y/p/9655753.html python ...

  7. [BZOJ 5415] 归程

    一棵KrusKal重构树,然而我数组开小了,忘记清空一个标记 洛谷传送门 BZOJ传送门 ......好像成权限题了Orz 回顾我们用KrusKal做生成树的时候,我们将边排序后连通各个连通块,那么边 ...

  8. 洛谷 P3239 / loj 2112 [HNOI2015] 亚瑟王 题解【期望】【DP】

    ???看不懂的期望DP 题目描述 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑. 他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚 ...

  9. HDU6395(分段+矩阵快速幂)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=6395 给你一个式子,给出你A,B,C,D,P,n,让你求出第n项的式子Fn.(其中ABCDPn均在1e9的 ...

  10. eclipse 安装 scala

    1.官网下载地址 http://scala-ide.org/download/current.html 目前最新的版本 http://download.scala-ide.org/sdk/lithiu ...