js 标签属性与导航

时间：2023-02-11 12:21:51

导航标签的方法：

 一 , 全局导航:

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 获取元素、修改元素&sol;css样式&sol;标签属性、简单事件、数据类型

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

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

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

  5. css&plus;js实现自动伸缩导航栏

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

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

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

  7. Html 改变原有标签属性

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

  8. 【转载】HTML5 Audio&sol;Video 标签&comma;属性&comma;方法&comma;事件汇总

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

  9. Android Activity标签属性

    Android Activity标签属性 Activity 是 Android 系统四大应用组件之一,用户可与 Activity 提供的屏幕进行交互,以执行拨打电话.拍摄照片.发送电子邮件等操作开发者 ...

随机推荐

  1. Spring--PropertyPlaceholderConfigurer

    1. PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现,也就是 BeanFactoryPostProcessor接口的一个实现.PropertyPlaceho ...

  2. JAVA中I&sol;O流

    IO流分为输入流(InputStream)和输出流(OutputStream)两类 按流所处理的数据类型又可以分为字节流和字符流(用于处理Unicode字符数据)两类 字节流主要是由 InputStr ...

  3. Knockout学习笔记之二（&dollar;root，&dollar;parent及&dollar;data的区别）

    以下是我从Google上找到的一个例子,非常生动形象,我修改了部分代码,具体内容如下: 对于$root 与$parent的区别: $root refers to the view model appl ...

  4. ASP&period;NET MVC应用require&period;js实践

    这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41d6ad.html Require.js是一个支持j ...

  5. 【python cookbook】【字符串与文本】13&period;对齐文本字符串

    问题:以某种对齐方式将文本做格式化处理 解决方案: 1.针对字符串:ljust().rjust().center()方法 2.针对任何值,更加通用的:format()  更多内容:https://do ...

  6. leetcode第一刷&lowbar;Triangle

    非常easy的一道DP,看到空间限制是O(N)的,不要习惯性的以为是要保存每一行的最小值,不难想到是要保存一行其中各个数为路径终点时的和的大小.当算到最后一行时,就是从顶部究竟部以这个底部位置为终点的 ...

  7. Docker Machine

    Docker Machine http://dockone.io/article/1485?utm_source=tuicool&utm_medium=referral 本地安装与使用 Doc ...

  8. compass的使用

    compass常用的一些命令 compass create 创建新Compass项目 compass init  为已存在项目添加compass compass clean 移动已生成的文件和缓存 c ...

  9. Django学习（九）---Templates过滤器及Django shell和Admin增强

    一.Templates过滤器 过滤器属于django模板语言 修改模板中的变量,从而显示不同内容 {{ value | filter }} 举例:{{ list_nums | length}}    ...

  10. 【BZOJ3685】【zkw权值线段树】普通van Emde Boas树

    原题传送门 因为马上要开始搞树套树了,所以学了一波权值线段树...毕竟是会点zkw线段树的,所以zkw线段树大法好! 解题思路: 介绍一下权值线段树吧,其实感觉就是线段树的本义,就是你用线段树维护了数 ...

相关文章