js-dom查询练习

最新推荐文章于 2022-06-09 20:02:05 发布

flowerxxxxx

最新推荐文章于 2022-06-09 20:02:05 发布

阅读量85

点赞数

分类专栏： Js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/flowerxxxxx/article/details/122794256

版权

Js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        /*
        * 定义一个函数，专门用来为指定元素绑定单击响应函数
        * 参数：
        *   idStr 要绑定单击响应函数的对象的id属性值
        *   fun 事件的回调函数，当单击元素，该函数会被触发
        * */
        function myClick(idStr,fun){
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }

        window.onload = function (){
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function (){
                btn04.innerHTML = "yadayo~~~"
                //获取id为city的元素
                var city = document.getElementById("city");

                //查找city下的所有li节点
                var lis = city.getElementsByTagName("li");


                for(var i = 0;i<lis.length;i++){
                    alert(lis[i].innerHTML);
                }
            }
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function (){
                //获取id为city的节点
                var city = document.getElementById("city");
                //返回city的所有子节点
                /*
                * childNodes属性会获取包括文本节点在内的所有节点
                * 根据dom标签标签空白也会当成文本节点
                * */
                var cns = city.childNodes;
                // alert(cns.length)
                // for(var i=0;i<cns.length;i++){
                //     alert(cns[i])
                // }
                var cns2 = city.children;
                alert(cns2.length)

            }
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function (){
                //返回id为phone的有还俗
                var phone = document.getElementById("phone");
                //返回id为phone的第一个子节点
                // phone.childNodes[0];
                //firstchild节点可以获取到道歉元素的第一个子节点（包括空白文本节 点）,不支持ie8一下的浏览器
                var fir = phone.firstChild;
                fir = phone.firstElementChild;
                alert(fir)
                alert(fir.innerHTML)
            }

            //为id为btn07的按钮绑定一个单击响应函数
            myClick("btn07",function (){

                //获取id为bj的节点
                var bj = document.getElementById("bj");

                //返回#bj的父节点
                var pn = bj.parentNode;
                alert(pn.innerHTML)
                alert(pn.innerText)
                /*
                * innerText
                *   -该属性可以获取元素内部的文本内容
                *
                * */

            })

            //为id为btn08的按钮绑定一个单击响应函数
            myClick("btn08",function (){
                //获取id为android的元素
                var and = document.getElementById("android");
                //返回android的前一个兄弟节点
                var ps = and.previousSibling;

                var pe = and.previousElementSibling;

                alert(ps);

            })


        }
    </script>

</head>
<body>
    <ul id = "city">
        <li id="bj">北京</li>
        <li id = "sh">上海</li>
        <li>东京</li>
        <li>首尔</li>
    </ul>
    <ul id="phone">
        <li>ios</li>
        <li>android</li>
        <li>windows</li>
        <li>macos</li>
    </ul>

    <button id="btn04">获取城市信息</button>
    <button id="btn05">btn05</button>
    <button id="btn06">btn06</button>
    <button id="btn07">btn07</button>
    <button id="btn08">btn08</button>
</body>
</html>

在这里插入图片描述

flowerxxxxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-dom查询练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /* * 定义一个函数，专门用来为指定元素绑定单击响应函数 * 参数： * idStr 要绑定单击响应
复制链接

扫一扫

专栏目录