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

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. selenium第三课（selenium八种定位页面元素方法）
		
    selenium webdriver进行元素定位时,通过seleniumAPI官方介绍,获取页面元素的方式一共有以下八种方式,现按照常用→不常用的顺序分别介绍一下. 官方api地址:https://s ...
    
		
    2. 
						
  2. （java）selenium webdriver学习---三种等待时间方法：显式等待，隐式等待，强制等待
		
    selenium webdriver学习---三种等待时间方法:显式等待,隐式等待,强制等待 本例包括窗口最大化,刷新,切换到指定窗口,后退,前进,获取当前窗口url等操作: import java. ...
    
		
    3. 
						
  3. webAPI(DOM) 2.1 获取页面元素 | 事件1 |  属性操作 | 节点 | 创建元素 | 事件2
		
    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
    
		
    4. 
						
  4. 前端js,css文件合并三种方式,bat命令
		
    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
    
		
    5. 
						
  5. 前端之JavaScript：JS之DOM对象三
		
    js之DOM对象三   一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for ...
    
		
    6. 
						
  6. Request三种获取数据的方式
		
    今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...
    
		
    7. 
						
  7. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
		
    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
    
		
    8. 
						
  8. js获取页面元素距离浏览器工作区顶端的距离
		
    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...
    
		
    9. 
						
  9. JS基础语法---创建对象---三种方式创建对象：调用系统的构造函数；自定义构造函数；字面量的方式
		
    创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Makefile 自动化变量
			
    Makefile中常用自动化变量解释如下: $@------规则的目标文件名 $<------规则的第一个依赖项文件名 $^------规则的所有依赖文件列表,以空格隔开. $?-------所 ...
    
			
    2. 
						
  2. 欧几里得&扩展欧几里得
			
    原博网址:http://www.cnblogs.com/frog112111/archive/2012/08/19/2646012.html 欧几里德算法 欧几里德算法又称辗转相除法,用于计算两个整数 ...
    
			
    3. 
						
  3. ASPxSpinEdit 控件的三元判断
			
    方法一:<dx:ASPxSpinEdit ID=" DisplayFormatString="c" Width="100px"></ ...
    
			
    4. 
						
  4. （译）详解javascript立即执行函数表达式（IIFE）
			
    写在前面 这是一篇译文,原文:Immediately-Invoked Function Expression (IIFE) 原文是一篇很经典的讲解IIFE的文章,很适合收藏.本文虽然是译文,但是直译的 ...
    
			
    5. 
						
  5. 为什么C++中空类和空结构体大小为1？（转载）
			
    原文链接:http://www.spongeliu.com/260.html 对于结构体和空类大小是1这个问题,首先这是一个C++问题,在C语言下空结构体大小为0(当然这是编译器相关的).这里的空类和 ...
    
			
    6. 
						
  6. 内省(Introspector)
			
    内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法 目的:主要用于传递数据信息,这种类中的方法主要用于访问私有的字段(且方法名符合某种命名规则) p ...
    
			
    7. 
						
  7. 机器学习中的算法——决策树模型组合之随机森林与GBDT
			
    前言: 决策树这种算法有着很多良好的特性,比如说训练时间复杂度较低,预测的过程比较快速,模型容易展示(容易将得到的决策树做成图片展示出来)等.但是同时,单决策树又有一些不好的地方,比如说容易over- ...
    
			
    8. 
						
  8. Hibernate的配置文件以及用法
			
    一. 三大框架 Hibernate 1.安装hibernate插件至ecilpse 2.进行配置 2.1 主配置文件 <?xml version="1.0" encoding ...
    
			
    9. 
						
  9. linux C学习笔记01--makefile
			
    不知不觉毕业五年了,以前学的linux基本都忘了,重新温习起来吧! 下面是自己写的makefile文件,供新手和自己回头时查阅 CC=gcc EXE=c.out CCC=g++ EEE=cc.out  ...
    
			
    10. 
						
  10. easyui里弹窗的两种表现形式
			
    easyui里弹窗的两种表现形式 博客分类: jQueryEasyUi   1.主JSP页面中描绘弹窗   <div id="centerDiv" data-options= ...
    
			
    11.