Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一、三种获取页面元素的方式：
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的异同的更多相关文章
- selenium第三课（selenium八种定位页面元素方法）
selenium webdriver进行元素定位时,通过seleniumAPI官方介绍,获取页面元素的方式一共有以下八种方式,现按照常用→不常用的顺序分别介绍一下. 官方api地址:https://s ...
- （java）selenium webdriver学习---三种等待时间方法：显式等待，隐式等待，强制等待
selenium webdriver学习---三种等待时间方法:显式等待,隐式等待,强制等待 本例包括窗口最大化,刷新,切换到指定窗口,后退,前进,获取当前窗口url等操作: import java. ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 前端之JavaScript：JS之DOM对象三
js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for ...
- Request三种获取数据的方式
今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- JS基础语法---创建对象---三种方式创建对象：调用系统的构造函数；自定义构造函数；字面量的方式
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...
随机推荐
- 11. Evaluate Reverse Polish Notation
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...
- 制作HP MicroServer Gen8可用的ESXi 5.x SD/TF卡启动盘
前些日子看到HP公司和京东在搞服务器促销活动,于是就入了一个 ProLiant MicroServer Gen8 的低配版 相比上一代产品,新一代 MicroServer系列微型服务器可更换处理器,还 ...
- JavaScript笔记基础篇(一)
一. 常用正则表达式汇总以及部分问题解决方案 正则匹配: var str = "This is my test"; var test = new RegExp("test ...
- SpringMVC整合MongoDB开发 架构搭建
系统环境: 操作系统: windows 7 数 据 库: mongodb2.0.6 驱 动 包: Spring3.1.2 + mongodb2.7.3 + spring-data-mongodb1 ...
- 关于对 maximio平台的五个常用类的初步理解及总结
AppBean:绑定应用的默认Bean类,控制主对象集/单个对象,和ui关联的类 继承:DataBean DataBean:任何对象集/单个对象,在ui端处理类. 1.在对象层:写一个Fld类,调用构 ...
- mysql的从头到脚优化之服务器参数的调优
一. 说到mysql的调优,有许多的点可以让我们去做,因此梳理下,一些调优的策略,今天只是总结下服务器参数的调优 其实说到,参数的调优,我的理解就是无非两点: 如果是Innodb的数据库,innod ...
- 解决PHP在IE中下载文件,中文文件名乱码问题
if( stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE')!==false ) $filename = urlencode( $filename ); // 输入 ...
- XidianOJ 1182 Chinese Paladin – Qi’s troubles
题目描述 As we all know, Xiahou Jinxuan (Chinese Paladin 5 Prequel's protagonist) and Yue Jinzhao (Chine ...
- 初识Memcached
一,什么是memcached? Memcached是一个高性能的分布式内存对象缓存系统,用于动态web应用以减轻数据库负载..它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱 ...
- 编程范式 epesode7，8 stack存放指针类型and heap，register
这一节从后往前写. ____stack and heap ___stack由 汇编语言操控管理,数据先入后出. 栈是存放局部变量,函数调用子函数时,该函数在栈中占用的空间会增大,用于存放子函数的局部变 ...