JavaScript DOM操作

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量129 收藏
点赞数
分类专栏： JavaScript 自学 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44303404/article/details/107510433
版权

DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。

关于DOM更详细的说明

下面主要是关于如何用DOM操作对象改变样式或者属性。

1.DOM操作HTML
（1）改变HTML输出流：
注意不要在文档加载完成之后使用document.write()。会覆盖该文档。
（2）寻找元素：
通过id找到HTML元素。
通过标签名找到HTML元素。
（3）改变HTML内容：
使用属性innerHTML
（4）改变HTML属性：
使用属性：attribute

典型的例子：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>修改html的内容</p>
        <p id="pid">Hello,world!</p>
        <button onclick="change1()">修改p便签的内容</button>
        <script>
            function change1(){
                document.getElementById("pid").innerHTML = "HELLO,WORLD!";
            }
        </script>

        <p>修改html属性</p>
        <a id="aid" href="https://www.baidu.com">百度首页</a><br>
        <button onclick="change2()">修改链接属性</button>
        <script>
            function change2(){
                document.getElementById("aid").href = "https://www.qq.com/";
                document.getElementById("aid").innerHTML = "腾讯首页";
            }
        </script>
    </body>
</html>

其他方法：

在这里插入图片描述
（1）getElementsByName()通过name获取元素。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <script>
            function getName(){
                var count = document.getElementsByName("pn");
                alert(count.length);//得到4。说明得到一个数组集合 
                var p = count[0];
                p.innerHTML = "World";//将第一个p标签的内容进行修改
            }
            getName();
        </script>
    </body>
</html>

（2）getAttribute()获取元素属性。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>

        <a id="aid" title="得到了a标签的属性">hello</a>
        <script>
            function getArr(){
                var anode = document.getElementById("aid");
                var atrr = anode.getAttribute("title");
                alert(atrr);
            }
            getArr();
        </script>
    </body>
</html>

（3）setAttribute()设置属性。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>

        <a id="aid" title="得到了a标签的属性">hello</a>
        <script>
            function setArr(){
                var anode = document.getElementById("aid");
                anode.setAttribute("href","https://www.baidu.com");
            }
            setArr();
        </script>
    </body>
</html>

（4）childNodes访问子节点。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>

        <a id="aid" title="得到了a标签的属性">hello</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
        <script>
            function getChildNode(){
                var childnode = document.getElementsByTagName("ul")[0].childNodes;
                alert(childnode.length);
            }
            getChildNode();
        </script>
    </body>
</html>

（5）parentNode访问父节点，只有一个。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>

        <a id="aid" title="得到了a标签的属性">hello</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
        <div id="div"><p id="pid"></p></div>
        <script>
            function getParentNode(){
                var div = document.getElementById("pid");
                alert(div.parentNode.nodeName);
            }
            getParentNode();
        </script>
    </body>
</html>

（6）creatElement()创建元素节点

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <a id="aid" title="得到了a标签的属性">hello</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
        <div id="div"><p id="pid"></p></div>
        <script>
            function creatNode(){
                var body = document.body;
                var input = document.createElement("input");
                input.type = "button";
                input.value = "按钮";
                body.appendChild(input);
            }
            creatNode();
        </script>
    </body>
</html>

（7）insertBefore()插入节点

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <a id="aid" title="得到了a标签的属性">hello</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
        <div id="div"><p id="pid"></p></div>
        <script>
            function addNode(){
                var div = document.getElementById("div");
                var node = document.getElementById("pid");
                var newNode = document.createElement("p");
                newNode.innerHTML = "动态添加一个p元素";
                div.insertBefore(newNode,node);
            }
            addNode();
        </script>
    </body>
</html>

（8）removeChild()删除节点

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <a id="aid" title="得到了a标签的属性">hello</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
        <div id="div">
            <p id="pid1">第一个p元素</p>
        </div>
        <script>
            function removeNode(){
                var div = document.getElementById("div");
                var p = div.removeChild(div.childNodes[1]);
            }
            removeNode();
        </script>
    </body>
</html>

（9）网页尺寸OffsetHeight和scrollHeight

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <p name="pn">Hello</p>
        <a id="aid" title="得到了a标签的属性">hello</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
        <div id="div">
            <p id="pid1">第一个p元素</p>
        </div>
        <script>
            function getSize(){
                var height = document.documentElement.offsetHeight||document.body.offsetHeight;
                var width = document.documentElement.offsetWidth||documrnt.body.offsetWidth;
                alert(width + "," + height);
            }
            getSize();
        </script>
    </body>
</html>

2.通过DOM对象改变CSS样式。
基础语法：

document.getElementById(id).style.property = new style;

实际例子：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        .div{
            width: 100px;
            height: 100px;
            background: lightskyblue;
        }
    </style>
    <body>
        <div class="div" id="div">hello world</div>
        <button onclick="change1()">改变背景颜色</button>
        <button onclick="change2()">改变字体大小</button>
        <button onclick="change3()">改变字体颜色</button>
        
        <script>
            function change1(){
                document.getElementById("div").style.backgroundColor = "red";
            }
            function change2(){
                document.getElementById("div").style.fontSize = "20px"
            }
            function change3(){
                document.getElementById("div").style.color = "white";
            }
        </script>
    </body>
</html>

3.DOM EventListener
（1）addEventListener():
语法：element.addEventListener(event, function, useCapture);
方法用于向指定元素添加时间句柄。
（2）removeEventListener():
移除方法添加事件句柄。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    
    <body>
        <button id="btn">按钮</button>
        <script>
            var x = document.getElementById("btn");
            x.addEventListener("click",hello);
            x.addEventListener("click",world);

            // 删除EventListener
            // x.removeEventListener("click",hello);
            // x.removeEventListener("click",world);
            
            function hello(){
                alert("hello");
            }
            function world(){
                alert("world");
            }
        </script>
    </body>
</html>
yanwuhc
关注
专栏目录
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript dom操作 删除元素 示例代码
06-27
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
Vue | 带有左右点击按钮可控制滑动的列表
weixin_44303404的博客
04-03 9318
效果 功能点 大概有如下两个功能点： 列表横向排列 点击左右两个按钮可以左右移动每个item（附加动画） 思路 列表横向排列可以使用flex布局解决，主要逻辑在左右滑动的控制上面。 在样式上来看，左右滑动其实可以看成：改变position为relative时属性left值。 具体分析如下： 如上图，蓝色为外层div，红色为内层div。 内层div装有列表的各项item，所以它的宽度可能会大于外层div的宽度。外层div采用定宽，同时设置overflow: hidden，使内层div突出的部分隐藏起来
小经验 | 解决关于使用了position:relative后的高度或者宽度的调整问题
weixin_44303404的博客
09-13 7277
今天写代码的时候发现，某一个元素设置了height属性为默认的auto，但高度不在自己预期之中。如下图，最底部多了很大一片空白。 将相关的元素设置border属性（用于调试），但一直找不到是哪里的问题。直到用谷歌调试一下，发现这个东西。 感觉这一个元素的高度刚好就是下面多出来的高度。后来我才忽然想起，原来右边的元素（表格）定义了position:relative属性。 position：relative–相对于本来的位置进行定位，同时不脱离文档流。 所以，中间的box高度实际上应该是左边元素高度+右边
demo | 用JavaScript写一个简易的计时器，实现开始计时、暂停计时、继续计时、重置的功能。
weixin_44303404的博客
06-10 2988
今天学到了JavaScript的计时对象模型，于是心血来潮，想做一个简单的计时器。下面是最终的代码。 在这里插入代码片
webpack结合VScode的基本使用方法
weixin_44303404的博客
09-13 1662
先打开vscode，打开项目文件夹，同时打开终端。输入代码 npm init -y 进行初始化。初始化完成后，会出现一个叫package.json文件，里面有相关配置信息。 因为这是一个前端项目，所以需要创建一个src文件夹，同时创建相关的html、css、JavaScript文件。并写入自己的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
JavaScript中，Number()和parseInt()的区别
weixin_44303404的博客
05-30 1245
Number()和parseInt()都可以将非数字类型为数字类型。对于二者的区别，用字符串类型和非字符串类型转换进行解释。 【对于字符串类型转换为数字类型】 使用Number()转换的时候，对于字符串而言，如果转换的字符串不是纯数字，包含字母或者其他，则直接返回NaN。 使用parseInt()转换的时候，需要看情况。如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN。 <script> document.write("通过Number() 函数转换字符串'12
用JavaScript实现瀑布流布局的效果（附源码）
weixin_44303404的博客
07-24 691
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 ——摘自百度百科“瀑布流” 制作瀑布流布局，首先需要准备几张图片，将其放置在html页面中。 <head> <meta charset="utf-8"> <title>瀑布流练习</title> <link rel="stylesheet" type="text/css" hr
JavaScript事件、事件对象
weixin_44303404的博客
07-23 188
JavaScript 使我们有bai能力创建动态页面。事件是可以被 JavaScript 侦测到zhi的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。 JavaScript里的事件有很多， 主要分为两种： 一种是由人触发的，比如鼠标单击、双击、移动鼠标、在输入框输入文本等等都会触发这类事件， Javascript通过监视这些事件，可以知道用户在网页里干什么，好做出不同的交互反馈。 第二种是由浏
笔记 | ECMAscript6 基本语法
weixin_44303404的博客
09-09 181
ECMAscript 6 基本语法 1.变量 var （1）可以重复声明 （2）无法限制修改 （3）没有块级作用域 let（变量） （1）不能重复声明 （2）变量-可以重复修改 （3）有块级作用域 const（常量） （1）不能重复声明 （2）常量-不能重复修改 （3）有块级作用域 解释一下块级作用域：使用var和function定义的变量a和方法test可以在大括号外边被访问，而使用let和const定义的变量和常量无法在大括号外面被访问。 { var a = 1; let b = 2;
笔记 | JavaScript语言基础
weixin_44303404的博客
07-22 156
JavaScript语言基础 笔记整理 JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。 1.Hello JavaScript <script> document.write("Hello Javascript"); </script> document是javascript的内置对象，代表浏览器的文档部分 document.write(“Hello Javascript”); 向文档写入字符串 2.JavaScript与DOM结合的例子
JS继承常见的几种方式
weixin_44303404的博客
08-14 131
原型链继承 原型继承很简单，就是将子类的原型挂在到父类对象上。 // 一个父类 function Father(){ this.name = "xhc", this.age = 21, this.hobbies = [] // 引用类型属性 } // 父类原型上的属性/方法 Father.prototype.getAge = function(){ console.log(this.age) } // 一个子类 function Child(){} Child.prototype = n
笔记 | webpack的更多用法
weixin_44303404的博客
09-13 126
下面记录一下关于webpack的几个更多的使用方法。 (1)对于 module.exports={ mode:'development', } 在ES6中的写法是： export default{...} 导入的时候是： import ... from 'id' (2)对于前一篇文章所述，每当我们修改原来的js文件之后，总是需要使用 npm run dev来对main.js进行更新，显然是很繁琐的事情。对于这个问题，可以有下面的解决方法。 在终端输入指令，安装webpack-dev-serve
JavaScript BOM对象模型
weixin_44303404的博客
07-23 109
BOM即 浏览器对象模型(Browser Object Model) 浏览器对象包括 Window(窗口) Navigator(浏览器) Screen (客户端屏幕) History(访问历史) Location(浏览器地址) 1.Window对象 （1）获取文档显示区域的高度和宽度。 一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。 通过window对象可以获取文档显示区域的高度和宽度。 通过调用innerWidth和innerHeight获取。（注意，不能加括号！！不是一个
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 854
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值