JavaScript学习笔记高阶篇-DOM编程(四)

10 DOM编程

  • 简介

DOM:(Document Object Model)文档对象模型
浏览器在解析HTML文件时,会将每一个标签解析为一个DOM对象,最终,一个HTML文件就被解析为了一颗DOM树

在这里插入图片描述

浏览器根据DOM树的结构,渲染页面的效果,所谓的DOM编程,就是通过JS操作DOM从而修改页面

  • DOM编程的组成
    • 获取页面中元素的DOM对象
    • 操作DOM,修改页面

10.1 获取DOM对象

  • 语法
//只返回获取的第一个元素的DOM对象
document.querySelector("选择器");

//返回获取的所有元素DOM对象,是一个数组
document.querySelectorAll("选择器");
选择器:用来选择匹配标签

10.2 选择器

1.基本选择器

  • id选择器
    • 语法:#id属性值
<p id="i1">p1</p>
<p id="i2">p2</p>
<input type="button" onclick="idSel()" value="单击"/>
<script type="text/javascript">
    function idSel(){
        var p1Dom = document.querySelector("#i1");
        console.log(p1Dom);
        var p2Dom = document.querySelector("#i2");
        console.log(p2Dom);
    }
</script>
  • 类选择器
    • 语法:.class属性值
<p class="c1">p1</p>
<p class="c1">p2</p>
<p class="c2">p3</p>
<p class="c1 c2">p4</p>

<script type="text/javascript">
    var c1Doms = document.querySelectorAll(".c1");
    for(var i = 0; i < c1Doms.length; i++){
        console.log(c1Doms[i]);
    }
</script>
  • 标签选择器
    • 语法:直接用标签名
<p>p1</p>
<h1>h1_1</h1>
<p>p2</p>
<h1>h1_2</h1>
    <script type="text/javascript">
        var h1Doms = document.querySelectorAll("h1");
        for(var i = 0; i<h1Doms.length; i++){
            console.log(h1Doms[i]);
        }
    </script>

  • 多路选择器
    • 语法:选择器1,选择器2,…
<p id="i1">p1</p>
<h1>h1_1</h1>
<p class="c1">p2</p>
<h1 class="c2">h1_2</h1>
    <script type="text/javascript">
        var doms = document.querySelectorAll("#i1,h1,.c1");
        for(var i = 0; i <doms.length; i++){
            console.log(doms[i]);
        }
    </script>

2.层次选择器

  • 后代选择器:获得父标签所有后代
    • 语法:父选择器 子选择器
<p id="p1">这是个段落<span>这是p中的span</span></p>
<span>这是p的兄弟span</span>

    <script type="text/javascript">
        var spans = document.querySelectorAll("#p1 span");
        for(var i = 0; i <spans.length; i++){
            console.log(spans[i]);
        }
    </script>

  • 直接子代选择器
    • 语法:父选择器>子选择器
<p>这是个段落<span>这是p中的span</span></p>
<span>这是p的兄弟span</span>

    <script type="text/javascript">
        var spans = document.querySelectorAll("body>span");
        for(var i = 0; i <spans.length; i++){
            console.log(spans[i]);
        }
    </script>

  • 所有兄弟选择器
    • 语法:哥哥选择器~弟弟选择器
<ul>
        <li id="i1">桃子</li>
        <li>李子</li>
        <li>梨子</li>
    </ul>

    <script type="text/javascript">
        var lis = document.querySelectorAll("#i1~li");
        for(var i = 0; i <lis.length; i++){
            console.log(lis[i]);
        }
    </script>

  • 紧邻兄弟选择器
    • 语法:哥哥选择器+弟弟选择器
<ul>
        <li id="i1">桃子</li>
        <li>李子</li>
        <li>梨子</li>
    </ul>

    <script type="text/javascript">
        var lis = document.querySelectorAll("#i1+li");
        for(var i = 0; i <lis.length; i++){
            console.log(lis[i]);
        }
    </script>

3.过滤选择器

过滤选择器:对基本或者层次选择器选择到一组标签进行再次过滤,一般不单独使用。

属性过滤
  • 语法:

[属性名=值] 过滤属性为指定值的标签
[属性名$=后缀] 过滤属性为指定后缀的标签
[属性名^=前缀] 过滤属性以指定前缀开头的标签
[属性名*=值] 过滤属性值包含特定内容的标签
[属性名] 过滤显式定义出某个属性的标签

  • 示例:
 <form action="">
     用户名: <input type="text" name="username"> <br>
     密码:<input type="password" name="pwd"> <br>
     验证码:<input name="validateCode"><br>
     <input type="submit" value="登录"/>
</form>

    <script type="text/javascript">
        var inputs1 = document.querySelectorAll("input[type='text']");
        for(var i = 0; i <inputs1.length; i++){
            console.log(inputs1[i]);
        }

        console.log("------------------");
        var inputs2 = document.querySelectorAll("input[name$='d']");
        for(var i = 0; i < inputs2.length; i++){
            console.log(inputs2[i]);
        }

        console.log("--------------------");
        var inputs3 = document.querySelectorAll("input[name^='u']");
        for(var i = 0; i <inputs3.length; i++){
            console.log(inputs3[i]);
        }

        console.log("-----------");
        var input4 = document.querySelectorAll("input[type*='t']");
        for(var i =0; i <input4.length; i++){
            console.log(input4[i]);
        }

        console.log("-------------");
        var input5 = document.querySelectorAll("input[type]");
        for(var i = 0; i < input5.length; i++){
            console.log(input5[i]);
        }
    </script>

子元素过滤
  • 语法:

:nth-child(n) 过滤自个是家里排行第n(从1开始)的元素
:first-child 过滤自个是家里排行老大的元素
:last-child 过滤自个是家里排行老幺的元素

  • 示例:
 <table border="1" align="center">
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>xiaohong</td>
                <td>
                    <a href="" class="delete">删除</a>
                    <a href="">更新</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>xiaohei</td>
                <td>
                    <a href="" class="delete">删除</a>
                    <a href="">更新</a>
                </td>
            </tr>
        </tbody>
    </table>   

    <script type="text/javascript">
        //获取所有删除超链接
       var deletes =  document.querySelectorAll("td>a:nth-child(1)");
        for(var i = 0; i < deletes.length; i++){
            console.log(deletes[i]);
        }
        console.log("--------------");
        var deletes2 = document.querySelectorAll("td>a:first-child");
        for(var i = 0; i < deletes2.length;i++){
            console.log(deletes2[i]);
        }

        console.log("--------------");
        var updates = document.querySelectorAll("td>a:last-child");
        for(var i =0; i < updates.length; i++){
            console.log(updates[i]);
        }
    </script>

10.3 访问标签属性

  • 语法:dom对象.属性
  • 示例:获取属性+修改属性
<form action="">
    data: <input type="text" name="data">
    <input type="button" value="单击" onclick="handleClick()">
    <input type="button" value="修改" onclick="handleClick2()">
</form>

    <script type="text/javascript">
        function handleClick(){
            //获取到 文本输入框的name和value属性值
            //1 获取dom对象
            var dataDom = document.querySelector("input[name='data']");
            //2 访问属性
            console.log(dataDom.name);
            console.log(dataDom.value);
        }

        function handleClick2(){
            //修改 文本输入框的value属性
            //1 获取dom对象
            var dataDom = document.querySelector("input[name='data']");
            //2 访问属性
            dataDom.value = 'xiaohei';

        }
    </script>

10.4 获取标签内部内容

  • 语法:dom对象.innerHTML
  • 示例:
<p>这是个段落<span>这是p中的span</span></p>

<input type="button" value="单击" onclick="handleClick()">
<input type="button" value="修改" onclick="handleClick2()">
    <script type="text/javascript">
        function handleClick(){
            //1 获取dom对象
            var pDom = document.querySelector("p");
            //2 操作内部内容
            console.log(pDom.innerHTML);
        }

        function handleClick2(){
            //1 获取dom对象
            var pDom = document.querySelector("p");
            //2 操作内部内容
            pDom.innerHTML = "<a href='https://www.baidu.com'>百度一下</a>";
        }
    </script>

总结

操作DOM:修改DOM标签的属性和内部内容。

  1. 修改属性
    dom对象.属性 = 新值;
  2. 修改内部内容
    dom对象.innerHTML = 新的内容;
评论 4 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

@是小李呀@

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值