JavaScript高级__3 DOM对象

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

一、DOM对象查找 HTML 元素

有三种方法来做这件事：

1.getElementById(id属性值);通过 id 查找 HTML 元素

2. getElementsByTagName(标签名)通过标签名查找 HTML 元素

3. getElementsByClassName(class属性值)通过类名找到 HTML 元素

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>查找 HTML 元素方法</title>
        <meta charset="utf-8"> 
        <script>
            //DOM对象
            //DOM--Document Object Model---文档对象模型
            //当网页被加载时，浏览器会创建页面的文档对象模型。

            //1.从dom[文档对象模型]得到需要被控制的html元素对应的dom对象
            //1.1.document.getElementById(id属性值);通过 id 查找 HTML 元素
            //注意:html元素必须提供id属性
            //     当id属性相同时，只控制第一个
            /*function testgetId(){
                var pdom= document.getElementById("p1");
                alert(pdom);//[object HTMLParagraphElement]得到元素的dom对象
                pdom.style.color="red";
            }*/

            //2.getElementsByTagName(标签名)通过标签名查找 HTML 元素
            //注意:标签名相同的元素有多个时，会得到一个dom对象数组
            //     当元素在html文件中只有一个的时候，
		    //     通过getElementsByTagName方法得到的结果依然是数组
            /*function testTagName(){
                var hdom= document.getElementsByTagName("h4");
                //alert(hdom);//[object HTMLCollection]得到一个HTML的数组对象不是元素对象的dom对象
                hdom[0].style.color="red";
                //alert(hdom[0].innerText)
            }*/

            //3. getElementsByClassName(class属性值)通过类名找到 HTML 元素
            //注意:class的属性值相同的元素有多个时，会得到一个dom对象数组
            //     当元素在html文件中只有一个的时候，
		    //     通过getElementsByClassName方法得到的结果依然是数组
            function testClassName(){
                var cdom= document.getElementsByClassName("c1");
                //alert(cdom);//[object HTMLCollection]
                cdom[0].style.color="red";
            }
        </script>
    </head>
    <body>
        <p id="p1">getElementById(id属性值);通过 id 查找 HTML 元素</p>
        <p id="p1">getElementById(id属性值);通过 id 查找 HTML 元素</p>
        <input type="button" value="测试通过getElementById(id属性值) 查找 HTML 元素" onclick="testgetId()"/>

        <h4>getElementsByTagName(标签名)通过标签名查找 HTML 元素</h4>
        <h4>getElementsByTagName(标签名)通过标签名查找 HTML 元素</h4>
        <input type="button" value="测试通过getElementsByTagName(标签名)查找HTML元素" onclick="testTagName()">
    
        <h5 class="c1">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</h5>
        <h5 class="c1">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</h5>
        <input type="button" value="测试通过getElementsByClassName(class属性值)查找HTML元素" onclick="testClassName()">
    </body>
</html>

二、.JavaScript 能够改变页面中的所有 HTML 元素

有两种：

1.innerHTML 属性--改变页面中HTML 元素的文本内容

2.innerText 属性--改变页面中HTML 元素的文本内容

3.value属性---得到或者修改表单元素的内容

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>到或者改变页面中的所有HTML元素以及元素的文本内容]</title>
        <meta charset="utf-8"> 
        <script>
            //得到或者改变页面中的所有HTML元素以及元素的文本内容]

            //1.innerHTML ---  会得到或者修改html元素以及元素内容
            //得到html元素的内容 得到的元素内容时有id元素之间的文本内容和标记元素
            function innerHTMLGetContent(){
                var pdom= document.getElementById("p1");
                var pod = pdom.innerHTML;
                alert(pod)
            }
            //改变元素的内容或者修改元素
            function innerHTMLUpdateContent(){
                var pdom= document.getElementById("p1");
                //pdom.innerHTML="<h4>测试innerHTML属性</h4>";//测试innerHTML属性
                pdom.innerHTML="修改后的元素内容";
            }

            //2.innerText --- 会得到或者修改html元素的文本内容
            //得到html元素的内容  得到是元素中的内容不包括元素中有的标记
            function innerTextGetContent(){
                var pdom= document.getElementById("p2");
                alert(pdom.innerText)
            }
            //改变元素的内容或者修改元素
            function innerTextUpdateContent(){
                var pdom= document.getElementById("p2");
                //pdom.innerText="<h4>测试innerText属性</h4>";//<h4>测试innerText属性</h4>
                pdom.innerText="修改后的元素为内容";
            }

            //3.value属性---得到或者修改表单元素的内容
            //得到表单元素的值
            function valueGetContent(){
                var inp1dom= document.getElementById("inp1");
                var getinp=inp1dom.value;
                alert(getinp)
            }
            ///修改表单元素的值
            function valueUpdateContent(){
                var inp1dom= document.getElementById("inp1");
                inp1dom.value="";
            }

        </script>
    </head>
    <body>
        <p id="p1">测试<a href="#">innerHTML</a>属性</p>
        <input type="button" value="测试innerHTML属性得到元素内容" onclick="innerHTMLGetContent()">
        <input type="button" value="测试innerHTML属性改变元素内容" onclick="innerHTMLUpdateContent()">
        
        <p id="p2">测试<a href="#">innerText</a>属性</p>
        <input type="button" value="测试innerText属性得到元素内容" onclick="innerTextGetContent()">
        <input type="button" value="测试innerText属性改变元素内容" onclick="innerTextUpdateContent()"><br><br>

        <input id="inp1" type="text" value="默认值">
        <input  type="button" value="测试value得到内容" onclick="valueGetContent()">
        <input type="button" value="测试value修改内容" onclick="valueUpdateContent()">

    </body>
</html>

三、JavaScript 能够改变页面中的所有 HTML 属性

1.得到html元素的属性值:dom对象.属性名称;

2.修改html元素的属性值:dom对象.属性名称=属性值;

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>控制html元素的属性</title>
        <meta charset="utf-8"> 
        <script>
           //控制html元素的属性
           //1.得到html元素的属性值:dom对象.属性名称;
            function getimg(){
                var imgdom= document.getElementById("img1");
                alert(imgdom.src) 
            }
            //2.修改html元素的属性值:dom对象.属性名称=属性值;
            function updatetImg(){
                var imgdom= document.getElementById("img1");
                if(imgdom.src=="file:///E:/wangxingPeiXun/JavaScript%E9%AB%98%E7%BA%A7/20211009JavaScript%E9%AB%98%E7%BA%A7%EF%BC%883%EF%BC%89/lianxi/imgs/avatar2.png"){
                    imgdom.src="imgs/avatar3.png";
                }else{
                    imgdom.src="imgs/avatar2.png";
                }
                
            }
        </script>
    </head>
    <body>
        <img id="img1" src="imgs/avatar2.png">
        <input type="button" value="测试得到元素的属性值" onclick="getimg()">
        <input type="button" value="测试修改元素的属性值" onclick="updatetImg()">
    </body>
</html>

 四、JavaScript 能够改变页面中的所有 CSS 样式

1.得到html元素的css属性值:dom对象.style.属性名称;

2.修改html元素的css属性值:dom对象.style.属性名称=属性值;

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>控制html元素的属性</title>
        <meta charset="utf-8"> 
        <script>
           //控制html元素的css
           //得到html元素的css属性值:dom对象.style.属性名称;
           //只适用于行内设置css
           function getCss(){
                var pdom = document.getElementById("p1");
                alert(pdom.style.fontSize);//30px
           }
           //修改html元素的css属性值:dom对象.style.属性名称=属性值;
           function updateCss(){
            var pdom = document.getElementById("p1");
            pdom.style.color="yellow";
           }
        </script>
    </head>
    <body>
       <p id="p1" style="font-size: 30px;color: red;">测试html元素的内容</p>
       <input type="button" value="测试得到元素的css样式值" onclick="getCss()">
       <input type="button" value="测试改变元素的css样式值" onclick="updateCss()">
    </body>
</html>

五、JavaScript 能够控制事件

1.页面初始化事件--onload---当html页面被打开的时候触发

2.点击事件--onclick---当html页面中的元素被点击时候触发

3.聚焦事件--onfocus---当html页面中的元素获得焦点的时候触发

4.失焦事件--onblur---当html页面中的元素失去焦点的时候触发

5.鼠标进入事件--onmouseover--当鼠标移动到html元素上的时候触发

6.鼠标划出事件--onmouseout--当鼠标移动到html元素外的时候触发

7.表单提交事件--onsubmit--当提交表单时触发

8.键盘按下事件--onkeydown(event)--当按下键盘按键是触发

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>控制事件</title>
        <meta charset="utf-8"> 
        <script>
           //1.页面初始化事件--onload
           //1.1在body元素中添加onload="事件执行函数"
           //<body onload="testload()">
           /*function testload(){
               alert("测试页面初始化事件")
           }*/
           //1.2使用Window.onload=function(){}
           /*window.onload=function(){
            alert("测试页面初始化事件")
           }*/

           //2.点击事件--onclick
           function testClick(){
               alert("测试点击事件");
           }

           //3.聚焦事件--onfocus  失焦事件--onblur
           //聚焦
           function testOnfocus(){
               var intdom= document.getElementById("inp1");
               intdom.value=""
           }
           //失焦
           function testOnblur(){
               var intdom= document.getElementById("inp1");
               intdom.value="测试失焦事件"
           }

           //4.鼠标进入事件--onmouseover  鼠标移出事件--onmouseout
           //鼠标进入
           function testmove(){
            var imgdom=document.getElementById("img1");
            imgdom.style.width="300px";
           }
           //鼠标移出
           function testOut(){
            var imgdom=document.getElementById("img1");
            imgdom.style.width="";//恢复之前照片大小
           }

           //5.表单提交事件--onsubmit--当提交表单的时候触发
           function testsubmit(){
                alert("表单提交事件");
                return true;
           }

           //6.键盘按下事件--onkeydown--当按下键盘按键的时候触发
           function testkey(event){
            var code=event.keyCode;
            if(code==13){
                alert("回车键");
            }
            if(code==37){
                        alert("<--");
                }
                if(code==38){
                        alert("上");
                }
                if(code==39){
                        alert("-->");
                }
                if(code==40){
                        alert("下");
                }
           }
        </script>
    </head>
    <body onkeydown="testkey(event)">
        <h4>控制事件</h4>
        <h5>页面初始化事件--onload---当html页面被打开的时候触发</h5>
        <h5>点击事件--onclick---当html页面中的元素被点击时候触发</h5>
       <input type="button" value="测试点击事件" onclick="testClick()">
        <h5>聚焦事件--onfocus---当html页面中的元素获得焦点的时候触发</h5>
        <h5>失焦事件--onblur---当html页面中的元素失去焦点的时候触发</h5>
        <input id="inp1" type="text" value="默认值" onfocus="testOnfocus()" onblur="testOnblur()">
        <h5>鼠标进入事件--onmouseover--当鼠标移动到html元素上的时候触发</h5>
        <h5>鼠标移出事件--onmouseout--当鼠标从html元素上的移动出去以后时候触发</h5>
        <img id="img1" src="imgs/avatar2.png" onmousemove="testmove()" onmouseout="testOut()">
        <h5>表单提交事件--onsubmit--当提交表单的时候触发</h5>
        <form action="login" method="get" onsubmit="return testsubmit()">
            <input type="text" name="username" value="用户名" /><br>
            <input type="password" name="password" value="" /><br>
            <input  type="submit" value="提交"/>
        </form>
        <h5>键盘按下事件--onkeydown--当按下键盘按键的时候触发</h5>
    </body>
</html>

六、创建和删除HTML 元素  

创建元素

document.createElement("元素名称");

document.createTextNode("文本内容");

父元素的dom对象.appendChild(node);

删除元素 父元素的dom对象.removeChild(子元素的dom对象);

例如;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8"> 
        <style>
            #div1{
                width: 200px;
                height: 200px;
                border: 8px solid red;
            }
        </style>
        <script>
          window.onload=function(){
            var but1= document.getElementById("but1");
            var h4dom=null;
                but1.onclick=function(){
                    //创建标记
                    h4dom=document.createElement("h4");
                    //创建元素内容
                    var h4text=document.createTextNode("测试创建HTML内容");
                    //将元素内容追加给标记
                    h4dom.appendChild(h4text);
                    h4dom.style.color="blue";
                    //将h4标记追加到div中
                    var divdom=document.getElementById("div1");
                    divdom.appendChild(h4dom)
                }

                var but2= document.getElementById("but2");
                but2.onclick=function(){
                   //将h4标记追加到div中
                   var divdom=document.getElementById("div1");
                   divdom.removeChild(h4dom);
                }
          }
        </script>
    </head>
    <body>
        <input id="but1" type="button" value="创建html元素"/><br>
        <input id="but2" type="button" value="删除html元素"/>
        <div id="div1"></div>
    </body>
</html>
slom_fxt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML自我学习笔记简易理解
qq_43325480的博客
09-09 323
HTML一级目录# 系列文章目录前言一、HTML是什么？二、如何编写HTML1.使用记事本2.使用工具3.浏览器 一级目录# 系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一级目录# 系列文章目录前言一、HTML是什么？二、如何编写HTML1.使用记事本2.使用工具3.浏览器 前言 提示：本文章关于自己对HTML的简易理解希望小白方便
关于DOM
代码火锅
09-18 304
学习前端的html,css,js，都会讲到DOM，而且用起来也很简单直观。但过去，就是学会了那几个对象的几个方法，比如document.getElementById() ，没有完整的认识。最近在讲前端课程的时候，认真阅读了W3School的DOM教程，忽然明白到了DOM的真正含义，跟大家分享。
HTML DOM 快速导览 – 元素对象 《img》 (HTMLImageElement)
裂缝中的阳光、的博客
11-24 5666
为 HTML 文件的内嵌元素 (embedded content) ， DOM 接口为 HTMLImageElement 。 取得 的元素对象 (object) 后，可存取元素的全局属性 (global attribute) 。 HTMLImageElement 另有定义属性 altsrccrossOriginuseMapisMapwidthheightnaturalWidthnat
将DOM对象转换成图片
南乔几经秋、的博客
12-21 3758
网上偶尔看到的一篇文章，觉得挺有意思的，在此mark一下。其实这种需求可以直接使用相关插件的：html2canvas，源码也容易看懂...   有一种新玩法：将DOM对象转换成图片，很神奇，很神奇，很神奇！ 我们要做的，就是将DOM的内容原原本本复制，并绘制成图片。svg的foreignObject元素可以包含html片段，这样就可以将整个DOM片段转换成svg。 然后我们可以有两个选择，第...
DOM实现获取img标签src属性的绝对位置和相对位置
好吗好的~的技术博客
12-29 4906
获取相对路径 显示图片的相对当前的文档所处的位置。 document.getElementById(obj).getAttribute('src')   获取绝对路径 显示是图片的完整路径，即在服务器的哪个文件夹下和文件命名。 document.getElementById(obj).src  ...
Java-JavaScript高级_day_10
Mym_up的博客
02-08 842
今日内容： 1. JavaScript： 1. ECMAScript： 2. BOM： 3. DOM： 1. 事件 DOM简单学习：为了满足案例要求 * 功能：控制html文档的内容 * 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过元素的id获取元素对象 * 操作Element对象： 1. 修改属性值： 1....
JavaScript学习笔记05【高级——DOM对象】
upward
02-08 506
JavaScript高级——DOM对象
day10_JavaScript高级_docx1
08-04
在案例1中，通过DOM对象切换电灯开关的图片，展示了如何动态修改页面内容。 事件是JavaScript中的另一个关键概念，它们是用户或浏览器行为的响应。例如，点击按钮、按下键盘键等都是事件。事件可以触发关联的函数，...
day10_JavaScript高级1
08-08
1.2.2视频详情1.2.3总结与补充1.2.4课堂提问与练习 Dom的功能 1.2.5习题答案 控制html文档的内容 获取页面标签(元素)对象：Elemen
JavaScript高级程序设计 DOM学习笔记
12-10
3) Node类型： ①Node是DOM中各种节点类型的基类型，共享相同的基本属性和方法。 □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE(3); □ Node.CDATA_SECTION_NODE(4); □ Node.ENTITY_RE
javascript高级程序设计
06-02
这只是JavaScript高级程序设计中的一部分内容，书中还涵盖了函数、对象、数组、正则表达式、错误处理、DOM操作、BOM（浏览器对象模型）以及异步编程等更深入的主题。通过学习这些内容，读者可以全面掌握JavaScript，...
JavaScript DOM高级程序设计 Part II
10-30
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
HTML DOM Image 对象
蚩尤后裔-汪茂雄
11-14 1944
目录 Image 对象 Image 对象的属性 标准属性 Image 对象事件 编码示例 常用操作 事件操作 Image 对象 Image 对象代表嵌入的图像，<img> 标签每出现一次，一个 Image 对象就会被创建。 需要理解的是：为了可以方便的在 JavaScript 中来操作 <audio>和<video>...
将网页的dom节点转换成img并下载下来
xiaoxu的博客
09-14 1756
这里需要用到一个依赖html2canvas，使用npm安装即可： npm install html2canvas --save-dev 然后在页面中引入即可使用。 利用了a标签的下载功能 dom保存为img的代码如下 function saveAsImg() { // 先获取你要转换为img的dom节点 var node = document.getEleme...
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1393
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 192
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 522
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
盲盒App开发时有哪些技术框架可以借鉴
bytekj的博客
06-14 600
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
最新发布
qq_61798306的博客
06-18 152
【element 】修改下拉菜单
javascript高级程序设计 pdf
02-07
JavaScript高级程序设计是一本由Nicholas C. Zakas编写的经典书籍，全称为《JavaScript高级程序设计：第3版》。这本书是一本面向有一定JavaScript基础的开发者的高级指南，涵盖了JavaScript语言的各个方面和应用领域...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值