• dom对html元素访问操作


    1. 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
    2. 利用节点关系访问HTML元素。常用的属性和方法如下:

    parentNode

    返回当前节点的父节点

    previousSibling

    返回当前节点的前一个兄弟节点

    nextSibling

    返回当前节点的后一个兄弟节点

    childNodes

    返回当前节点的所有子节点 数组

    firstChild

    返回当前节点的第一个子节点

    lastChild

    返回当前节点的最后一个子节点

    getElementsByTagName(tagName)

    返回当前节点的具有指定标签名的所有子节点

    案例:

    代码:

    <style type="text/css">
        /*以赵六为参照物*/
        #n4{color:red}
        
        </style>
        <script type="text/javascript">
        function method1(){
            //获取赵六所在的元素节点
            var z6=document.getElementById("n4");//页面加载完成才能调取
            //获取赵六的父节点ul
            var father=z6.parentNode;
            //文本对象
            alert(father.innerHTML);
            
        }
        </script>
    </head>

    <body>
    <ul id="names">
        <li id="n1">张三</li>
        <li id="n2">李四</li>
        <li id="n3">王五</li>
        <li id="n4">赵六</li>
        <li id="n5">小红</li>
        <li id="n6">小明</li>
    </ul>

    <input type="button" value="父节点" onClick="method(z6.parentNode)"><!--实参menthod(node)=method(z6.parentNode)-->
    <input type="button" value="第一个子节点" onClick="method(z6.parentNode.firstChild.nextSibling)"><!--第一个节点后的兄弟节点-->
    <input type="button" value="上一个节点" onClick="method(z6.previousSibling.previousSibling)"><!--上两个节点-->
    <input type="button" value="下一个节点" onClick="method(z6.nextSibling.nextSibling)"><!--下两个节点-->
    <input type="button" value="最后一个子节点" onClick="method(z6.parentNode.lastChild.previousSibling)"><!--第一个的最后一个的上一个节点-->
    <input type="button" value="得到所有li的元素个数" onClick="get()">
    </body>
    <script type="text/javascript">
        //获取赵六所在元素节点
        var z6=document.getElementById("n4");
        function method(node){
            alert(node.innerHTML);
        }
        
        function get(){
            //获取赵六所在元素父节点
    //        var father=z6.parentNode;
            //获取父元素所有的子节点数组
            alert(z6.parentNode.getElementsByTagName("li").length);/*获取n4的父节点下的所有li的长度*/
    //        var arr=.getElementsByTagName("li");
    //        alert(arr.length);
        }
        
        </script>

    元素节点可以调取指定位置的html元素,但因为获取许多值都是用的数组,所以很多时候数组长度需要-1;

    一般的流程是需要先获取父元素,通过父元素进行节点之间的互相调用

  • 相关阅读:
    zuul入门(5)zuul 处理异常
    SpringCloud的服务注册中心(三)
    SpringCloud的服务注册中心(四)- 高可用服务注册中心的搭建
    新概念英语(一)生词本1
    SpringBoot应用的监控与管理
    SpringBoot应用的属性管理
    SpringBoot应用的集成测试
    SpringBoot的RestController vs @ResponseBody + @Controller
    SpringBoot应用的启动方式
    SpringBoot应用的前台目录
  • 原文地址:https://www.cnblogs.com/a199706/p/11115074.html
Copyright © 2020-2023  润新知