Javascript高级部分【5】

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量135 收藏 1
点赞数
分类专栏： javascript基础总结 文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61044901/article/details/123635340
版权

JavaScript中的DOM对象

DOM--Document Object Model[文档对象模型]
当网页被加载时，浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树


        javascript不认识html标记，如果我们要想让javascript处理html标记，就得想尽一切办法，把html标记编程javascript对象。

问题：我们要怎么做才能把html标记，变成javascript对象？
答案：我们通过javascript提供的document对象的方法可以将html标记变成 javascript  对象。

一.document对象

    1.javascript提供好的
    2.我们在使用的时候，不需要new/其他方式创建

document对象提供了3个方法将html标记变成javascript对象
        1.getElementById(id属性值);通过 id 查找 HTML 元素

    <p id="p1">测试getElementById(id属性值);==p1</p>

    <p id="p2">测试getElementById(id属性值);==p2</p>

    <p id="p2">测试getElementById(id属性值);==p3</p>

    <input type="button" value="测试getElementById" οnclick="testdoc1();">

 function testdoc1(){

        // document对象提供了3个方法将html标记变成javascript对象

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

            var p1=document.getElementById("p1");

            // alert(p1);  //[object HTMLParagraphElement]

            // alert(typeof p1);  //object

        // 如果id属性相同的html元素有多个,getElementById只能得到第一个

            var p2=document.getElementById("p2");

            // alert(p2);  //[object HTMLParagraphElement]

            // alert(typeof p2);  //object

            // alert(p2.innerText);  //测试getElementById(id属性值);==p2

注意: 如果id属性相同的html元素有多个,getElementById只能得到第一个

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

    <a href="#">测试getElementByTagName--a1</a> <br>

    <!--a href="#">测试getElementByTagName--a2</a> <br>-->

    <input type="button" value="测试getElementByTagName" οnclick="testdoc1();">

 //2.getElementsByTagName(html标记名称)通过html标记名称查找 HTML元素变成javascript对象

        //TagName--html标记名称

        var aarray=document.getElementsByTagName("a");

        // alert(aarray);  //[object HTMLCollection]

        // alert(aarray.length);  //2

        /*

        for(var i=0;i<aarray.length;i++){

            alert(aarray[i].innerText);

        } //测试getElementByTagName--a1  测试getElementByTagName--a2

        */

        //当html元素的名称只剩一个的时候，getElementByTagName得到还是一个集合对象

        // alert(aarray[0].innerText); //测试getElementByTagName--a1

注意:当html元素的名称值剩一个的时候，getElementsByTagNam得到还是一个集合           对象。

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

    <input type="button" value="测试getElementByTagName" οnclick="testdoc1();">

    <span class="span1">测试getElementsByClassName--span1</span><br>

    <span class="span2">测试getElementsByClassName--span2</span><br>

    <span class="span2">测试getElementsByClassName--span3</span><br>

    <input type="button" value="测试getElementsByClassName" οnclick="testdoc1();" />

 //3.getElementsByClassName(class属性值)通过html属性值找到 HTML 元素变成javascript对象

        var spanObj=document.getElementsByClassName("span1");

        alert(spanObj); //[object HTMLCollection]

        alert(spanObj[0].innerText); //测试getElementsByClassName--span1

        //getElementsByClassName得到一个集合对象

        总结:getElementById -- 没有“s”得到一个对象

                getElementsByTagName  /  getElementsByClassName --有“s”得到一个集合【数组】

二.通过得到的javascript对象控制html元素

1.JavaScript 能够改变页面中的所有HTML元素的内容

     1)innerHTML 属性

       2)innerText 属性

************************************************************************************************

innerHTML属性与innerText属性的区别？
1.都可以得到得到/修改元素的文本内容
2.innerHTML属性--得到元素的文本内容时，如果有html标记，会得到html标记
                             --修改元素的文本内容时,如果有html标记，会解释运行。
3.innerText属性--得到元素的文本内容时，如果有html标记，不会得到html标记，只会得到标记中的文本内容  
                          --修改元素的文本内容时,如果有html标记，不会解释运行。

**************************************************************************************************************

     3) value属性
                专门用来得到/修改表单元素的文本内容

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

        function testContext(){

        //1.innerHTML属性--得到/修改元素的文本内容

        //得到：dom对象.innerHTML

        //修改：dom对象.innerHTML=数据值;

        var parray= document.getElementsByTagName("p");

        // alert (parray[0].innerHTML);

        //parray[0].innerHTML="修改p元素的文本内容"

        //如果文本内容中有html标记,html标记会被解释运行

        //parray[0].innerHTML="修改<a href=\'#\'>p元素</a>的文本内容";

        //2.innerText属性--得到/修改元素的文本内容

        //得到：dom对象.innerText

        //修改：dom对象.innerText=数据值;

        var spanArray=document.getElementsByTagName("span");

        //alert(spanArray[0].innerText);  //测试修改span元素的文本内容--innerText属性

        //spanArray[0].innerText="修改span元素的文本内容"

        //如果文本内容中有html标记,html标记不会被解释运行

        //spanArray[0].innerText="修改<a href=\'#\'>span元素</a>的文本内容";

       

        //3.value属性--专门用来得到/修改表单元素的文本内容

        //得到：dom对象.value

        //修改：dom对象.value=数据值;

        var inputobj=document.getElementById("input1");

        alert (inputobj.value);

        inputobj.value="测试修改表单元素值";

        }

    </script>

</head>

<body>

    <p>测试修改p元素的文本内容--innerHTML属性</p>

    <span>测试修改span元素的文本内容--innerText属性</span><br>

    <input id="input1" type="text" value="测试value属性"><br>

    <input type="button" value="测试按钮" οnclick="testContext();">

</body>

</html>

2.JavaScript 能够改变页面中的所有HTML属性

      HTML属性---为当前html标记提供附加信息，出现在html开始标记中。
      得到属性值:   dom对象.具体的html属性名称;
      修改属性值:   dom对象.具体的html属性名称="新的属性值";

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

        function testAttr(){

            var imgObj=document.getElementById("img1");

            //得到：dom对象.innerText

            alert(imgObj.src);

            //修改：dom对象.innerText=数据值;

            imgObj.src="imgs/defbbbe76e8e27f4aaa78c063c417e2.png"

        }

    </script>

</head>

<body>

    <img id="img1" src="imgs/avatar5.png">

    <input type="button" value="测试控制html的属性" οnclick="testAttr();">

</body>

</html>

3.JavaScript 能够改变页面中的所有 CSS 样式

注意:行内样式---在html开始标记中，用style属性设置的样式
         内部样式块---在html的head标记中用<style>设置的样式
         链入外部样式文件---创建独立的css文件，在html的head标记中用link标记链接

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width: 300px;

            height: 100px;

            background-color: blueviolet;

        }

    </style>

    <script>

        function testcss(){

        //得到样式值:dom对象.style.具体样式属性;   【行内样式】

            var divarray=document.getElementsByTagName("div");

        //alert(divarray[0].style.width);

        //修改样式值:dom对象.style.具体样式属性=“样式值”; 【行内样式/内部样式块/链入外部样式文件】

            divarray[0].style.width="200px";

            divarray[0].style.height="100px";

            divarray[0].style.backgroundColor="blue";

        }

    </script>

</head>

<body>

    <div style="width: 300px;height: 300px;background-color: red;"></div>

    <input type="button" value="测试样式" οnclick="testcss();">

</body>

</html>

    得到样式值:dom对象.style.具体样式属性;   【行内样式】
    修改样式值:dom对象.style.具体样式属性=“样式值”; 【行内样式/内部样式块/链入外部样式】

4.JavaScript 能够对页面中的所有事件做出反应

   目前我们所接触的事件只有onclick--按钮点击事件，其他的事件还没有接触。
      按钮点击事件为例:
          设置事件:
              1.标记设置事件，<script>中处理事件
              2.<script>中设置+处理事件

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

        function testClick(){

            alert("测试按钮点击事件1");

        }

        /*

        //当页面被打开的时候，得到按钮的javascript对象

            window.οnlοad=function(){

        //得到按钮的javascript对象

            var butobj= document.getElementById("but1");

        //设置事件处理

            butobj.οnclick=function(){

                alert("测试按钮点击事件2");

            }

        */

       

        function testload(){

        //得到按钮的javascript对象

            var butobj= document.getElementById("but1");

        //设置事件处理

                butobj.οnclick=function(){

                    alert("测试按钮点击事件2");

                }

    }

    </script>

</head>

<body οnlοad="testload();">

    <h1>1.标记设置事件,script中处理事件1</h1>

    <input type="button" value="测试按钮点击事件1" οnclick="testClick();">

     <h1>2.script标记中设置+处理事件</h1>

     <input id="but1" type="button" value="测试按钮点击事件2" >

</body>

</html>

爱好是吃的蓝胖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript高级部分【6】
m0_61044901的博客
03-23 194
javascript中的事件处理 1.常用的事件 1) 页面初始化事件 onload 2) 按钮点击事件 onclick <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> <!-- <script> function testLoad(){ a...
JS高级五
weixin_52482833的博客
03-19 485
JavaScript中的DOM对象 DOM--Document Object Model[文档对象模型] 当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM模型被构造为对象的树 javascript不认识html标记，如果我们要想让javascript处理html标记，就得想尽一切办法，把html标记编程javascript对象。 问题：我们要怎么做才能把html标记，变成javascript对象？ 答案：我们通过javascript提供的document对象的方法可以将...
Javascript 操作DOM属性
qq_40468450的博客
08-01 428
Javascript 操作DOM属性，操作DOM属性来更改Css样式来达到一个简单的交互效果
js引入html到对象,报表软件JS开发引用HTML DOM的windows对象
weixin_30495795的博客
06-19 124
HTML DOM是W3C标准(是HTML文档对象模型的英文缩写，Document Object Model for HTML)。HTML DOM定义了用于HTML的一些列标准的对象，以及访问和处理HTML文档的标准方法。通过DOM，可以访问所有的HTML元素，连同他们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。在JavaScript中可以访问并处理所有的HTML D...
js html字符串转对象,js eval函数使用，js对象和字符串互转.
weixin_39713686的博客
06-14 252
js eval函数使用，js对象和字符串互转.JavaScripteval()函数JavaScript 全局函数 定义和用法eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。语法eval(string)参数描述string必需...
JavaScript DOM编程基础
2201_75455485的博客
03-30 117
文档对象模型，是W3C组织推荐的处理课扩展标记语言的标准编程。
javascript高级程序设计
06-02
这只是JavaScript高级程序设计中的一部分内容，书中还涵盖了函数、对象、数组、正则表达式、错误处理、DOM操作、BOM（浏览器对象模型）以及异步编程等更深入的主题。通过学习这些内容，读者可以全面掌握JavaScript，...
javascript高级教程.pdf
05-26
《JavaScript高级教程》这本书深入探讨了这一动态语言的核心概念和技术，旨在帮助开发者提升技能，掌握JavaScript的高级用法。 首先，JavaScript是一种解释型的、基于原型的、动态类型的脚本语言。这意味着它不需要...
Javascript高级技巧分享
10-26
本文将探讨几个JavaScript的高级技巧，帮助开发者提升编程效率和代码质量。 1. 类型检测： 在JavaScript中，typeof操作符可以检测变量的基本类型，但无法区分对象类型的差异，如数组和对象。而instanceof则用于检查...
JavaScriptDOM高级程序设计
07-22
资源名称：JavaScript DOM高级程序设计内容简介：本书注重理论与实践的结合，全面讲述高级的DOM 脚本编程。全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持...
JavaScript高级篇视频教程
06-28
"JavaScript高级篇视频教程"旨在帮助已经掌握了JavaScript基础知识的学习者进一步提升技能，深入理解其高级特性，包括面向对象编程、异步处理、模块化、性能优化等多个方面。 在JavaScript的高级篇中，首先会讲解...
document对象获取HTML元素的三种常见方法
weixin_45936680的博客
05-06 3845
document常用获取HTML元素对象的常见方法有 1.根据元素的ID获取 document.getElementById(‘元素的ID’) 2.根据元素的类名获取 document.getElementsByClassName() 3.根据元素的标签名获取 document.getElementsByTagName(‘元素的标签名’) ...
DOM获取元素的方法
2201_75397635的博客
04-23 2144
document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元素。querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法返回指定选择器的所有元素对象集合。document.getElementById('id')方法，是由document对象提供的用于查找元素的方法。返回的集合是一个类数组对象，它可以像数组一样用索引来访问元素，但不能使用push()等方法。(1)该方法返回的是拥有指定id的元素；
通过document对象的方法获取标签对象
weixin_57219176的博客
09-05 1582
通过document对象的方法获取标签对象
js--getElementsByTagName
m0_46573829的博客
06-01 2843
二、getElementsByTagName 全线浏览器兼容的，得到元素的方法，就这两个： document.getElementById() 通过id得到元素 document.getElementsByTagName(); 通过标签名得到元素们 getElementsByTagName就是通过标签名得到元素，得到的是页面上所有该种标签元素，得到的是数组，数组可以有下标，开始是0，最后一项是.length-1 既然是数组，就能通过循环语句批量控制，比如表格的隔行变色： 1 v.
js获取所点击<a>的href值
热门推荐
Brook
03-02 2万+
//方式一 //获取当前点击的对象     $('a').click(         function() {             console.log("当前URL为:", $(this).attr('href'));         }     ); //方式二     var links = document.querySelectorAll('a
js把HTML转成对象,将js对象转换为html
weixin_40006963的博客
06-21 994
好的，我有一些JS通过URL从JSON中提取数据。 我知道想要将每个对象(author_name，rating，author_url)转换为js ID，所以我可以在html中调用该ID。将js对象转换为html例如这是我的JS代码到目前为止function initMap() {var service = new google.maps.places.PlacesService(map);serv...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 1245
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值