一、三种获取页面元素的方式:

getElementById:通过id来获取

<body>
<input type="text" value="请输入一个值:" id="txt"/>
<input type="button" value="按钮" id="btn"/>
<script>
    var txt=document.getElementById("txt");//获取id为txt的页面元素
    console.log(txt);
    txt.value="haha";//重新给id为txt的文本输入框的value赋值
</script>
</body>

getElementByTagName:通过标签名来获取

<body>
<input type="text" value="请输入一个值:" />
<input type="text" value="请输入一个值:" />
<input type="text" value="请输入一个值:" />
<input type="text" value="请输入一个值:" />
<input type="text" value="请输入一个值:" />
<script>
    var inputs=document.getElementsByTagName("input");//获取标签名为input所有页面元素。
    console.log(inputs); //在控制台中打印可以发现其是一个数组
    for(var i=0;i<inputs.length;i++){
        inputs[i].value="请输入另一个值:";//for循环遍历所有的input元素,可以给他的value重新赋值。
    }
</script>
</body>

getElementByClassName:通过类名来获取(注意:getElementsByClassName有很强的兼容性问题,一般不用)

<body>
<div class="haha"><button class="btn">按钮</button></div>
<script>
    var Haha=document.getElementsByClassName("haha");//获取class为haha的页面元素
    console.log(Haha);  //打印出来之后发现也是以数组的形式呈现
    var Btn=document.getElementsByClassName("btn");
    Btn[0].innerText="按钮1";  //因为本代码中只有一个类名为btn的button标签,所以可用它的也就是数组的首项控制这个button里面的属性。

</script>
</body>

二、事件:

事件的三要素:事件源、事件名称、事件的处理程序(里面执行的代码或代码段)

如何注册一个点击事件?

<body>
<input type="button" value="按钮" alt=""  id="btn1"/>
<input type="button" value="按钮2" alt="" id="btn2"/>
<input type="button" value="按钮3" alt="" id="btn3" />
<input type="button" value="按钮4" alt="" id="btn4" />
<img src="data:images/1.jpg" alt="" id="img"/>
<script>
    var img=document.getElementById("img");
    var btn1=document.getElementById("btn1");
    var btn2=document.getElementById("btn2");
    var btn3=document.getElementById("btn3");
    var btn4=document.getElementById("btn4");
//第一步获取事件源:这里是分别通过id获取一个img与四个button元素,并将它们的值存储在一个变量之中。
   btn1.onclick=function(){  //第二步:给事件源注册一个事件(下同)
        img.src="data:images/2.jpg";  //第三步:事件的处理程序。function(){}里面的代码就是事件的需要处理的程序。
    };
    btn2.onclick=function (){
        img.src="data:images/3.jpg";
    };
    btn3.onclick=function (){
        img.src="data:images/4.jpg";
    };
    btn4.onclick=function(){
        img.src="data:images/1.jpg";
    };
</script>
</body>

注册事件的两种方式小结:

Css样式:

<style>
 a img{
     display: block;
     float: left;
 }
    p{
        clear: both;
    }
</style>

行内式:

<body>
<a href="images/1.jpg" id="a1"  onclick="turn1();return false;"><img src="data:images/1-small.jpg" alt="" /></a>
<!--return false让a标签不能跳转-->
<a href="images/2.jpg" id="a2"  onclick="turn2();return false;"><img src="data:images/2-small.jpg" alt="" /></a>
<a href="images/3.jpg" id="a3"  onclick="turn(this);return false;"><img src="data:images/3-small.jpg" alt="" /></a>
<!this指代的是当前页面元素对象,本段代码中this指的就是本段代码的a标签 -->
<a href="images/4.jpg" id="a4"  onclick="turn(this);return false;"><img src="data:images/4-small.jpg" alt="" /></a>
<a href="images/5.jpg" id="a5"  onclick="turn(this);return false;"><img src="data:images/5-small.jpg" alt="" /></a>
<p></p>
<img src="data:images/placeholder.png" alt="" width="400" id="img"/>
<script>
    var img=document.getElementById("img");
    var a1=document.getElementById("a1");
    var a2=document.getElementById("a2");
//    var a3=document.getElementById("a3");
//    var a4=document.getElementById("a4");
//    var a5=document.getElementById("a5");
    function turn1(){
        img.src=a1.href;
    }
    function turn2(){
        img.src=a2.href;
    }
    function turn(jkl){   //封装这个事件的功能,jkl为函数传入的参数,传到HTML代码的turn(this)之中
        img.src=jkl.href; //此处是时间所执行的程序。作用是将上述HTML之中的img之中的src改为a标签的href路径。
    }
</script>
</body>

内嵌式:

<body>
<a href="images/1.jpg"><img src="data:images/1-small.jpg" alt=""/></a>
<!--return false组织a标签的默认跳转方式-->
<a href="images/2.jpg"><img src="data:images/2-small.jpg" alt=""/></a>
<a href="images/3.jpg"><img src="data:images/3-small.jpg" alt=""/></a>
<a href="images/4.jpg"><img src="data:images/4-small.jpg" alt=""/></a>
<a href="images/5.jpg"><img src="data:images/5-small.jpg" alt=""/></a>
<p></p>
<img src="data:images/placeholder.png" alt="" width="400" id="img"/>
<script>
    var img = document.getElementById("img");
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) { //因为使用getElementByTagName获取a标签元素时,所得的是一个数组,所以需要循环遍历数组中的每一个a标签
        var link = links[i];   //先将获取到的每一个a标签存入一个变量link之中
        link.onclick = function () { //注册一个事件,并封装它的功能
            img.src = this.href;  //this指代当前注册触发事件的对象a
            return false;
        }
    }
</script>
</body>

三、获取页面文本的API:innerText和innerHTML的异同点:

<body>
<div id="one">
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
</div>
<script>
   var one=document.getElementById("one");
    console.log(one.innerText);  //打印的是文本内容信息
                               //早期火狐浏览器不支持innnerText,而支持innnerHTML,后期全部支持了。
    console.log(one.innerHTML); //打印的是页面元素中的所有内容,包括标签
</script>
</body>
console.log(one.innerText); 

单独运行在控制台中的结果:

这里可以看出innnerText打印的是文本的内容信息。

console.log(one.innerHTML);

单独运行在控制台运行结果:

这里可以看出innnerHTML打印的是页面元素之中的所有内容,包括HTML标签。

相同点:在浏览器显示的结果相同,但是早期的火狐浏览器不支持innnerText,而支持innerHTML,后来两者都支持了,所以它们在浏览器中显示的结果相同。

<div id="one">
</div>
<script>
    var one=document.getElementById("one");
    one.innerText="<ul><li>123</li><li>234</li><li>345</li></ul>"; //原样输出
//    one.innerHTML="<ul><li>123</li><li>234</li><li>345</li></ul>"; //会发生转译
</script>

(1)       单独运行第一句时的结果是:

(2)       单独运行第二句时的结果是:

比较之后可以发现:用innerText时是按原来引号之中的内容输出,而使用innnerHTML引号之中的内容则会转译成html语言的形式输出。


												





											

Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同的更多相关文章

  1. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  2. Request三种获取数据的方式

    今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...

  3. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  4. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  5. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  6. getBoundingClientRect() 来获取页面元素的位置

    getBoundingClientRect() 来获取页面元素的位置   document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...

  7. getBoundingClientRect()来获取页面元素的位置”

    getBoundingClientRect()来获取页面元素的位置” 获取的是一个对象; 延伸阅读; https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA== ...

  8. 用getBoundingClientRect()来获取页面元素的位置

    以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0;do{_x += el.offsetLeft;_y ...

  9. jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

随机推荐

  1. 在DirectShow中支持DXVA 2.0(Supporting DXVA 2.0 in DirectShow)

    这几天在做dxva2硬件加速,找不到什么资料,翻译了一下微软的两篇相关文档.并准备记录一下用ffmpeg实现dxva2,将在第三篇写到.这是第二篇.,英文原址:https://msdn.microso ...

  2. android break 与 return 的区别

    break 的含义是中断,return 的含义是结束整个方法的执行. 区别. public static void main(String agrs[]){ int i; for(i=0;i<1 ...

  3. 【转】8G内存下MySQL的优化详细方案

    对于任何一个数据库管理系统来说,内存的分配使用绝对可以算的上是其核心之一了,所以很多希望更为深入了解某数据库管理系统的人,都会希望一窥究竟,我也不例外. 这里给出方案 按照下面的设置试试看: key_ ...

  4. sql语句修改列

    1.修改列名的常用语句 exec sp_rename '[dbo].[Table_1].[birthday]','birth'  --将表中列名为birthday改为birdh 属性不变,用的是数据库 ...

  5. 实现一个 能在O(1)时间复杂度 完成 Push、Pop、Min操作的 栈

    一,问题描述 实现一个栈(元素遵守先入后出顺序),能够通过 min 方法在 O(1)时间内获取栈中的最小元素.同时,栈的基本操作:入栈(Push).出栈(Pop),也是在O(1)时间内完成的. 二,问 ...

  6. laravel5.1学习(2)-- artisan tinker命令

    例如:为users表创建20条测试输入 G:\wamp\www\hcmf>php artisan tinker >>> namespace App; => null &g ...

  7. git笔记 常规使用

    1. 创建分支    git checkout -b fetch_name 2. 添加快照进行登记 git add . 3.登记到仓库 git commit -m 'message' git comm ...

  8. Cocos2d-x 3.2 学习笔记(十)Joystick 搖杆控件

    最近想做格鬥遊戲,那麼就要有搖杆控件,不想去看別人的代碼就自己寫了個搖杆控件,實現起來很簡單. 話不多說,看代碼: #ifndef __Joystick__ #define __Joystick__ ...

  9. Reporting Services 的伸缩性和性能表现规划(转载)

    简介 Microsoft? SQL Server? Reporting Services 是一个将集中管理的报告服务器具有的伸缩性和易管理性与基于 Web 和桌面的报告交付手段集于一身的报告平台.Re ...

  10. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...