学JS你不会DOM算真的学会了吗？

最新推荐文章于 2022-05-22 15:27:23 发布
最新推荐文章于 2022-05-22 15:27:23 发布
阅读量302 收藏 2
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44715697/article/details/108784453
版权

来来来，JavaScript核心基础语句送给你们
学JS你不会DOM算真的学会了吗？
对JavaScript中的 事件 进行疯狂 处理
用BOM来实现轮播图效果
我们来实现创建JavaScript中的自定义对象
JS中构造函数的原型prototype
还不明白JS中的内置对象吗？ 快来这里！
JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage

关于DOM

1. DOM简介

Document Object Model 文档对象模型

浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树

  • HTML文档和DOM树是一 一对应的关系
  • 当DOM树被修改时，与值对应的HTML文档也会随之改变
  • 当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作
  • DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件
  • 树上的每一个结点都是一个DOM对象，树的顶层为document对象

在这里插入图片描述

2. document对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
         *  document对象，表示整个文档
         */
        

        /* document.bgColor设置文档颜色属性 */
        function doBgColor() {
            document.bgColor='red';
        }
        /* document.title设置文档标题属性 */
        function doTitle() {
            document.title='DOM';
        }
        /* document.body设置文档主体属性 */
        function doBody() {
            //向body内添加一个文本结点
            document.body.appendChild(document.createTextNode('吗吗哈哈'));
        }
    </script>
</head>
<body>
    <button onclick="doBgColor()">设置页面背景</button>
    <button onclick="doTitle()">设置页面标题</button>
    <button onclick="doBody()">操作页面主体</button>
    <h3>喝光大佬的卡布奇诺</h3>
</body>
</html>
3. 查询操作

获取DOM对象

方法含义
document.geyElementById('id值')根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName('name属性值')根据name属性来查询，返回所有匹配的节点集合
document.getElementsByTagName("标签名")根据标签名来查询，返回所有匹配的节点集合
document.getElementsByClassName("类名")根据class属性查询，返回所有匹配的节点集合
document.querySelector("选择器")根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll("选择器")根据css选择器来查询，返回所有匹配的节点集合
node.getElementsByTagName("标签名")在当前节点的内部根据标签名来查询
node.parentNode属性查询当前节点的父节点
node.children属性查询当前节点的子节点集合，NodeList类型
node.firstElementChild属性查询当前节点的第一个元素子节点
node.lashElementChild属性查询当前节点的最后一个元素子节点
node.previousElementSibling属性查询当前节点的上一个元素节点
node.nextElementSibling属性查询当前节点的下一个元素节点
//使用getElementById方法，根据id来获取对象
<head>
    <script>
       function doQuery(){
           var objDiv = document.getElementById('d');
           console.log(objDiv);
           onsole.log(typeof objDiv);
       }
    </script>
</head>
<body>
    <button onclick='doQuery()'>查询获取页面中的元素</button>
    <div id="d">div</div>
</body>

//使用getElementsByName方法，根据name属性来获取对象
<head>
    <script>
        var objs = document.getElementsByName('hobby');
        console.log(objs);
    </script>
</head>
<body>
    爱好：
    <input type="checkbox" name="hobby" value="eat"> 吃饭
    <input type="checkbox" name="hobby" value="sleep"> 睡觉
    <input type="checkbox" name="hobby" value="paly"> 玩
</body>

//使用getElementsByTagName方法，根据标签名来获取对象
<head>
    <script>
        var objs = document.getElementsByTagName('div');
        console.log(objs[1]);		//获取三个对象中的第二个
    </script>
</head>
<body>
    <div id='1'>div1</div>
    <div id='2'>div2</div>
    <div id='3'>div3</div>
</body>

<head>
    //根据css选择器获取
    <script>
    	//返回单个对象
        var obj = document.querySelector('div.hello');
        console.log(obj);
        //返回整个集合
        var objs = document.querySelectorAll('div');
        console.log(objs);
    </script>
    <style>
        div .hello{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>   
</head>
<body>
    <div class='hello'>div1</div>
    <div id='2'>div2</div>
    <div id='3'>div3</div>
</body>

<head>
    //根据已有节点来获取其他节点
    //在当前节点的内部，根据标签名来获取
    <script>
        var ul = document.getElementById('myul');
        var lis = ul.getElementsByTagName('li');
    </script>
</head>

<body>
    <ul id='myul'>
        <li1>1</li1>
        <li2>2</li2>
        <li3>3</li3>
        <li4>4</li4>
        <li5>5</li5>
    </ul>
</body>

<head>
    <script>
        var li2 = document.getElementById('second');
        console.log("父节点：",li2.parentNode);
        console.log("父节点的父节点：",li2.parentNode.parentNode);
        console.log("父节点的所有子节点：",li2.parentNode.children);
        console.log("第一个子节点",li2.parentNode.firstElementChild);
        console.log("最后一个子节点",li2.parentNode.lastElementChild);
        console.log("前一个兄弟节点",li2.previousElementSibling);
        console.log("后一个兄弟节点",li2.nextElementSibling);
    </script>
</head>

<body>
    <ul class='myul'>
        <li1>li1</li1>
        <li2 id='second'>li2</li2>
        <li3>li3</li3>
        <li4>li4</li4>
        <li5>li5</li5>
    </ul>
</body>
4. 访问操作
（1）访问属性

获取/设置DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与之对应的HTML标签同名的属性

两种方式：

  • 直接访问属性

    用法：DOM对象.属性

  • 调用setAttribute()和getAttribute()方法

    DOM对象.setAttribute(“属性名”,“属性值”) 或 DOM对象.getAttribute(“属性名”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doProperty() {
            let obj = document.getElementById('baidu');
            console.log(obj);

            //获取对象的属性
            console.log(obj.href);
            console.log(obj.target);
            console.log(obj.id);
            //或者
            console.log(obj.getAttribute('href'));

            //修改属性的值
            obj.href = "https://www.xina.comc.cn";
            obj.target = "_self";
            obj.id = "xina";
            //或者
            obj.setAttribute('href','https://www.qq.com');
        }
    </script>
</head>
<body>
    <button onclick="doProperty()">访问属性</button>
    <br>
    <a href="https://www.baidu.com" target="_blank" id="baidu">点这里</a>
</body>
</html>

这里有一个特殊的属性checked，它是一个Boolean属性，取值为true或false

<head>
    <script>
        function doProperty(){
            let obj= document.getElementById('male');
            obj.checked=true;
        }
    </script>
</head>
<body>
    <button onclick="doProperty()">访问属性</button>
    
    <input type="radio" name="sex" id="male" value="male" checked>男
    <input type="radio" name="sex" id="female" value="female">女
</body>
（2）访问内容

获取/设置标签中的内容

三种方式：

  • 使用innerHTML

    用法：DOM对象、innerHTML 将内容解析为HTML

  • 使用innerText

    用法：DOM对象、innerText 将内容作为纯文本，出现转义字符时会进行解析

  • 使用textContent

    用法：DOM对象、textContent 将内容作为纯文本，出现转义字符时会直接保留特性

<head>
    <script>
        function doContent(){
            let obj= document.getElementById('mydiv');
            //获取内容
            console.log(obj.innerHTML);
            console.log(obj.innerText);
            console.log(obj.textContent);

            //设置内容
            obj.innerHTML='<h1>hello</h1>';
            obj.innerText='你\n好';
            obj.innertextContent='你\n好';
        }
    </script>
</head>
<body>
    <button onclick="doContent()">访问内容</button>
    
    <div id="mydiv">
        <h2>hello world</h2>
    </div>
</body>
（3）访问CSS

获取/设置CSS属性

三种方式：

  • 使用style属性

    用法：DOM对象.style.样式属性

    如果CSS属性中有短横线，需要去除短横线，然后将其后的单词首字母改成大写字母，如fontsize

<head>
    <script>
        function doStyle(){
        	/**
        	 *	使用style属性
        	 */
            var obj = document.getElementById('mydiv');

            //获取属性
            console.log(obj.style.width);

            //设置属性
            obj.style.backgroundColor='red';
        }
    </script>
</head>
<body>
    <button onclick="doStyle()">访问CSS</button>
    
    <div id="mydiv" style="width: 300px;height: 300px;background-color:pinck">
        <h2>hello world</h2>
    </div>
</body>

  • 使用className属性

    用法：DOM对象.className

<head>
    <style>
        #mydiv {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .hello {
            color: red;
            width: 400px;
            font-size: 30px;
            border-radius: 20px;
        }       
    </style>
    <script>
        function doStyle(){
            /**
             *  使用className属性
             */
            var obj = document.getElementById('mydiv');
            obj.className = 'hello';
            console.log(obj.className);          
        }
    </script>
</head>
<body>
    <button onclick="doStyle()">访问CSS</button>
    
    <div id="mydiv" class="world">
        <h2>hello world</h2>
    </div>
</body>

  • 使用classList属性

    用法：DOM对象.classList

    通过classList的add()、remove()进行样式的添加和删除

<head>
    <style>
        #mydiv {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .hello {
            color: red;
            width: 400px;
            font-size: 30px;
            border-radius: 20px;
        }
        .world {
            text-decoration: underline;
        }
    </style>
    <script>
        function doStyle(){
            /**
             *  使用className属性
             */
            var obj = document.getElementById('mydiv');
            obj.classList.add('hello');
            obj.classList.add('world');
            console.log(obj.classList); //获取当前DOM对象上的所有类样式     
        }
    </script>
</head>
<body>
    <button onclick="doStyle()">访问CSS</button>
    
    <div id="mydiv" class="world">
        <h2>hello world</h2>
    </div>
</body>
5. 更新操作

结点的创建、添加、修改、删除等

方法含义
document.createElement("标签名")创建一个元素结点，即标签
document.createTextNode("文本内容")创建一个文本结点，即标签中的文本内容
node.appendChild(newNode)将一个新的结点newNode添加到指定的结点node中子节点末尾
node.insertBefore(newNode,refNode)将一个新的结点newNode插入到node结点的子结点redNode之前
node.replaceChild(newNode,redNode)用一个新的结点newNode替换原有的node结点中的子结点refNode
node removeChild(refNode)删除当前结点中指定的子结点
node remove()删除当前结点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doUpdate(){
            //1.创建元素结点
            var li = document.createElement('li');
            //2.设置文本内容
            li.innerHTML = 'li4';
            var text = document.createTextNode(li4);
            li.appendChild(text);
            //3.设置属性
            li.id = 'fourth';
            //4.添加到结点中
            var myul = document.getElementById('myul');
            //添加到末尾
            myul.appendChild(li);
            //添加到指定结点的前面
            myul.insertBefore(li,document.getElementById('second'));
            //替换指定结点
            myul.replaceChild(li,document.getElementById('second'));
            //删除内部某个结点
            myul.removeChild(document.getElementById('second'));
            //删除当前结点
            document.getElementById('second').remove();
        }
    </script>
</head>
<body>
    <button onclick="doUpdate()">更新</button>
    <ul id="myul">
        <li id="first">li1</li>
        <li id="second">li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

在我们学习完这章的内容之后，可以尝试完成一个简单的计算器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 80px;
            height: 25px;
        }
    </style>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function calculate(flag){
            var num1 = Number($('num1').value);
            var num2 = Number($('num2').value);

            var result;
            switch(flag){
                case '+':
                    result = num1+num2;
                    break;
                case '-':
                    result = num1-num2;
                    break;
                case '*':
                    result = num1*num2;
                    break;
                case '/':
                    result = num1/num2;
                    break;
            }
            $('result').value = result;
        }
    </script>
</head>
<body>
    <div>
        <h2>简易计算器</h2>
        <p>
            第一个数：<input type="text" id="num1">
        </p>
        <p>
            第二个数：<input type="text" id="num2">
        </p>
        <p>
            <button onclick="calculate('+')">+</button>
            <button onclick="calculate('-')">-</button>
            <button onclick="calculate('*')">*</button>
            <button onclick="calculate('/')">/</button>
        </p>
        <p>
           结果： <input type="text" id="result" disabled>
        </p>
    </div>
</body>
</html>
吗吗哈哈
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS学习之DOM操作元素
weixin_53317758的博客
05-16 390
显然JS学习没有HTML节奏快，感觉知识点还要琐碎难记，但是只要花时间努力攻克难关就能跟上老师的脚步，不能轻易放弃 常用元素的属性操作 innerText.innerHTML改变元素内容 scr href id alt title 只要是元素.属性值 就能改变属性 案例：分时显示不同图片，显示不同问候语 根据不同时间，页面显示不同图片，同时显示不同的问候语 如果上午时间打开页面，显示上午好，显示上午的图片 如果下午时间打开页面，显示下午好，显示下午的图片 如
js dom
weixin_34198453的博客
04-18 101
2019独角兽企业重金招聘Python工程师标准>>> ...
html dom要学吗,HTML_DOM学习
weixin_29053073的博客
06-19 100
HTML DOM 树通过ID/类名/标号可以定位HTML元素，然后可用JS改变这些元素的样式内容，并对DOM事件作出反应对HTML事件的响应：onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数onload 和 onunload： 事件可用于处理 cookieresize:重置浏览器事件(向winwows添加事件句柄)。onfocus...
在没有DOM操作的日子里，我是怎么熬过来的（上）
weixin_33897722的博客
11-28 128
前言 在我动笔写这篇文章的时候，我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做，请听闰土娓娓道来。前几年我还在想，假如有一天，前端世界里不能再直接操作dom了，我该怎么办？没想到竟一语成谶，这一天终究还是来了...... 此文记录了一次JQ党转变成Vue信徒的心路历程。 那么接下来，正文从这开始~ 熟悉闰土的朋友都...
为什么说js操作DOM很慢
weixin_30824479的博客
12-08 265
DOM 文档对象模型（Document Object Model简称DOM），是W3C组织推荐的处理扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就成为DOM。DOM的历史追溯至1990年代后期微软于Netscape的“浏览器大战”。双方为了在javascript和JScript一决生死，于是大规模的赋予浏览器强大的功...
JS学习资料
02-15
总的来说，这份JS学习资料将带你深入了解JavaScript的各个方面，无论你是初学者还是有一定经验的开发者，都能从中受益。通过系统学习，你可以提升解决问题的能力，更好地应对复杂前端项目的需求。记得实践是检验真理...
你已经学习了CSS,下一步学习什么呢?
12-13
在你已经掌握了CSS，能够熟练地创建样式表以控制网页的布局和样式后，下一步的学习方向应该是JavaScript。JavaScript是Web开发中的重要组成部分，它是一种广泛使用的编程语言，不仅适用于个人计算机，也支持笔记本...
Angular学习教程手把手教你学会Angular2源码见于本demo项目
08-10
这个"Angular学习教程手把手教你学会Angular2源码见于本demo项目"的资源，显然是一个指导初学者逐步掌握Angular2（现在被称为Angular4或更高版本）的实践教程。在这里，我们将深入探讨Angular的核心概念和关键特性。...
javascript DOM 编程艺术源码
08-11
JavaScript DOM编程艺术是一本深入探讨如何使用JavaScript操作和操纵网页文档对象模型（Document Object Model）的经典书籍。DOM是HTML和XML文档的一种结构化表示，它允许我们通过编程方式访问和修改网页内容。这...
lco-js:学习JavaScript
03-27
学会如何使用JavaScript选择、创建、修改和删除DOM元素，是前端开发者必备的技能。同时，事件处理和事件委托也是构建交互式应用的重要部分。 另外，异步编程是JavaScript的重头戏。理解回调函数、Promise、async/...
DOM学习笔记
进一步，有一步的欢喜。
08-05 123
DOM（部分）： 1、文档对象模型（document object model）,是将文档中的节点抽象成文档树的节点的API（可编程程序接口。）。 DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。要注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生J...
闲话js前端框架（3）——再也不想碰DOM
西风世界
08-19 2819
DOM操作必须时刻注意着，第一，要正确的选择到对应的元素；第二，比小心不能影响其他人的工作。 另外，你会发现更为悲惨的事情，如果你的代码全是自己写的，那么还好，但如果引入的第三方库，你根本不知道，这个库会将dom树修改成什么样子。 DOM比较慢，我们应该尽可能的减少不良的DOM操作，例如大批量的重建DOM，或者是更新DOM时，重建了不变的节点等。
还在苦恼BOM,DOM难吗？终极教程一看就会
weixin_67260069的博客
05-22 369
小伙伴们大家好，我是爱编程的汤姆猫，今天我们继续学习让小伙伴们头疼的bom和dom。 我们今天要学习的主要有： 一、节点关系 。节点关系可以分为父子和兄弟，父节点 parentElement，所有子节点 children，第 一个子节点 firstElementChild，最后个子节点 lastElementChild 。 兄弟节点，上一个兄弟 previousElementSibling，下一个兄弟 nextElementSibling。 二、属性操作。getAttribute 获.
学DOM时的一点体会
尽力而为
12-18 853
小小心得，勿拍
DOM基础（三）
dazn33036的博客
08-08 302
　　对于DOM来说，知识点其实并不多，要理解DOM并不难，难的是会用。可能有的人看见DOM获取元素要这么长一串单词就觉得生无可恋了。不过说实在的，如果你能理解他的意思跟用法。而且稍微再有点英语基础的话，DOM其实还是很简单的。而对于觉得自己英语不好的人来说，不用想了，多打代码是你唯一的出路，程序员练得就是手感。 　　上一篇文章中，我主要讲了下一些事件，还有一些节点的操作。不过对于节点的...
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
DOM树知识点梳理
12-08 1万+
为什么会提到Dom树呢，或许它对于我们很好地理解网页各个元素，标签和控件搭配，以及各种js，css等的加载会有一些帮助。笔者在工程中遇到了一些小问题，本质就是dom树的东西掌握的不扎实。所以借此来梳理一下。 1.HTML DOM ok, 我们先来看一下W3school中怎么解释这个概念和结构的。W3school是一个很不错的网站，很适合初学者和基础不扎实的人。HTML DOM 定义了访问和操作

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值