JavaScript的第14天

最新推荐文章于 2024-07-08 16:22:29 发布

竹叶依旧

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量149

点赞数

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

本文链接：https://blog.csdn.net/qq_46426476/article/details/122384397

版权

dom查询1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="city">
        <li id="cityLi1"></li>
        <li id="cityLi2"></li>
        <li id="cityLi3"></li>
    </ul>
    
    <script>
        /* 
            getByTagName()---方法
            返回当前节点指定标签名后代节点
         */
        //  获取city节点
        var city=document.getElementById("city");
        // 获取city节点下所有节点（拿到的是数组）
        var li=city.getElementsByTagName("li");
        // 遍历数组，修改每一个节点的内容
        for (let i = 0; i < li.length; i++) {
   
            console.log(li[i].innerHTML="这是修改后的内容");
            
        };
        

        /* 
            childNodes---属性
            获取包括文本节点在内的所有节点
            dom标签间的空白也会被当做文本节点
            注意：在IE8的浏览器中，不会把空白文本当做子节点,
                所有该属性在IE8中会返回4个子元素，而在其他浏览器是9个
        */
       var cns=city.childNodes;
       console.log(cns.length); //7
       for (let i = 0; i < cns.length; i++) {
   
           console.log(cns[i]); //city节点下面的所有节点，包括换行
       }


       /* 
            children---属性
            获取当前元素的所有的子元素(不包括空白)(获取到的是所有元素组成的数组)
       */
       var cd=city.children;
       for (let i = 0; i < cd.length; i++) {
   
          cd[i].innerHTML="children修改";
           
       }


       /* 
            firstChild---属性
            获取第一个节点 (标签间的空白也会被当做一个文本节点)
       */
      var fc=city.firstChild;
      console.log(fc);  //输出ul和第一个li间的空白


       /* 
            firstElementChild---属性
            获取当前元素第一个子元素(不包括空白)
       */
       var fe=city.firstElementChild;
       fe.innerHTML="firstElementChild修改后"; 

      /* 
            lastChild---属性
            获取最后一个节点 (标签间的空白也会被当做一个文本节点)
      */
      var lc=city.lastChild;
      console.log(lc);  //输出ul结束标签和最后一个li间的空白
      

      /* 
            lastElementChile---属性
                获取当前节点最后一个元素
      */
     var cle=city.lastElementChild;
     console.log(cle); //<li id="cityLi3">children修改</li>
    </script>
</body>
</html>

dom查询2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="city">
        <li id="cityLi1">1</li>
        <li id="cityLi2">2</li>
        <li id="cityLi3">3</li>
    </ul>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>

    <input id="username" type="text" value="这是一段文本">
    <p id="test">这是一段</p>
    <script>
        /* 
            定义一个函数，专门用来指定元素绑定单击响应函数
                参数:
                    1: idstr  要获取元素的id值
                    2: fun    回调函数，发生点击事件后执行的函数，作为参数传入自定义函数myclick;
        */
       function myclick(idstr,fun) {
   
           var btn=document.getElementById(idstr)

最低0.47元/天解锁文章

竹叶依旧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的第14天

dom查询1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫