JavaScript学习笔记高阶篇-DOM编程（四）

最新推荐文章于 2022-03-03 13:27:04 发布
最新推荐文章于 2022-03-03 13:27:04 发布
阅读量195 收藏 1
点赞数 2
分类专栏： 学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48462895/article/details/112787721
版权

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 = 新的内容;
@是小李呀@
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
关系选择器(兄弟、父子选择器)
comegoing_xin_lv的博客
07-11 4056
包括父子、祖先后代、兄弟的多种选择器
jQuery选择器大全(48个代码片段+21幅图演示)
dengjie0448的博客
06-02 222
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。 一、基本选择器 1. id选择器（指定id元素） 将id...
兄弟选择器
娓娓道来
07-25 143
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器 - 兄弟伪类</title> <style> .first{ color: red; } /*兄弟伪类： +：获取当前元...
浏览器解析css选择器的规则
请叫我凤哥哥的博客
11-20 339
浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。 从上到下匹配与从下至上匹配，两种匹配规则的性能差别很大。之所以会差别很大，是因为从下向上的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从上向下的匹配规则的性能都浪...
Javascript-DOM编程艺术研究.docx
11-17
Javascript-DOM编程艺术研究.docx
JavaScript 学习笔记（十三）Dom创建表格
12-10
Dom基础—创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。 1、insertRow(index)：index从0开始 这个函数将新行添加到index的...
JavaScript学习笔记之DOM基础操作实例小结
12-08
本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考，具体如下： 一、子节点 1、元素节点、文本节点 实例01 html <body> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4...
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
JavaScript-DOM--:JavaScript DOM编程艺术源代码
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
css一些特殊选择器
weixin_30315723的博客
11-28 367
css一些特殊选择器1、在box中，从第几个div开始选择，以后的都会选择到，以下代码表示从#box里面的第二个div开始选择：#box div：nth-of-type(n+2){}2、选择奇数个：div>p:nth-of-type(odd){}3、选择偶数个：div>p:nth-of-type(even){}4、选择多少倍数的子级元素：div>p:nth-child(3n){}...
DOM编程
weixin_67235801的博客
03-03 954
有趣的网页编码
JS中的DOM高级操作（运动）
luojiafeng_的博客
12-21 340
匀速运动 function animate(obj, target, speedTime) { var speedTime = speedTime || 10; clearInterval(obj.timer); obj.timer = setInterval(function () { var speed = target - obj.offsetLeft > 0 ? 5 : -5; if...
整理dom 获取当前元素的兄弟节点/父节点/子节点/筛选元素
热门推荐
很馋的虫子
07-09 1万+
$('#id').siblings() 当前元素所有的兄弟节点 $('#id').prev() 当前元素前一个兄弟节点 $('#id').prevaAll() 当前元素之前所有的兄弟节点 $('#id').next() 当前元素之后第一个兄弟节点 一、js 获取元素dom(父节点,子节点,兄弟节点)： var test = document.get...
JQueryDOM节点过滤
DaftJayee的博客
07-01 247
1》eq(index) : [方法] 选择器选取带有指定 index 值的元素,index从0开始 2》index() ：获取到当前元素的索引值（从0开始） 3》is() : 检测 4》not() : [方法] 5》has() : 获取本元素下指定有子元素的元素 ==>最终返回（本元素[父元素]） 6》filter() : 筛选 7》slice() : 截取 ...
JavaScript DOM编程 # 一
skysys的研究小屋
09-07 181
©严禁未授权转载 HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。 DOM树大概这样子…如果没有一点点了解的同学建议先阅读文档：https://www.w3school.com.cn/js/js_htmldom.asp *Ref《JavaScript DOM编程艺术》 有一处细节，比方如下代码： <!DOCTYPE html> <html lang=...
JS 高级总结
weixin_34128237的博客
07-12 1862
一、查找HTML元素 　　通常，通过 JavaScript，您需要操作 HTML 元素。 　　1、通过 id 找到 HTML 元素 　　2、通过标签名找到 HTML 元素 　　3、通过类名找到 HTML 元素 提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。 var x=document.getElementById("intro"); var y=d...
Javascript——DOM编程
Switch的博客
12-27 1万+
Javascript——DOM编程 基本概述     文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以
react-router-dom v6编程导航使用详情
最新发布
05-10
import { useNavigate } from 'react-router-dom'; ``` 然后在您的组件中使用它： ```javascript function MyComponent() { const navigate = useNavigate(); function handleClick() { navigate('/path/to/...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@是小李呀@

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值