博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
获取页面元素的几种方式
阅读量:5285 次
发布时间:2019-06-14

本文共 2203 字,大约阅读时间需要 7 分钟。

在JS中我们可以通过以下几种方式获取到页面中的元素:

1、使用id来获取对象的元素(获取到的对象元素是唯一的)

document.getElementById("")

例:

<input type="text" value="默认的文字" id="txt"/>

<input type="button" value="按钮" id="btn"/>
<script>
    // 第一种获取页面元素的方式  getElementById
    var txt =   document.getElementById("txt");
    console.log(txt);
    console.log(txt.value);
    txt.value="这是修改后的文字";
    var btn = document.getElementById("btn");
    console.log(btn);
    console.log(btn.value);

console.log(btn.id);

    btn.value = "按钮6666";
</script>

2、通过标签名来获取

document.getElementsTagName("")

<input type="text" value="123"/>

<input type="text" value="456"/>
<input type="text" value="789"/>
<input type="text" value="abc"/>
<input type="text" value="mmmm"/>
<input type="text" value="kkk"/>
<script>
    // 获得页面元素的第二种方式  通过标签名
  var inputs =   document.getElementsByTagName("input");
    console.log(inputs);
    for(var i=0;i<inputs.length;i++){
//        console.log(inputs[i].value);
        inputs[i].value = "aaaaa";
    }
</script>

通过标签名的方式获取到的元素是一个数组,即使只有一个标签也是放着数组里面的;

3、通过类名来获取

document.getElementsByClassName("")

div class="dv"></div>

<p class="dv"></p>
<div class="dv"></div>
<p class="dv"></p>
<span class="dv"></span>
<script>
    // 第三种获取页面元素的方式
    var eles = document.getElementsByClassName("dv"); //获得的也是一组数据
    console.log(eles);
</script>

通过类名获取到对象的元素也是一组数据

但是getElementsByClassName有很强的兼容性,一般不推荐使用。

看完获取页面元素的方式下面我们在看看JS中的事件;

事件就是页面文档或者浏览器窗口中发生的一些特点的交互瞬间。

事件有和小说一样也有三要素:

第一事件要有事件源:要注册事件的对象

第二事件要有事件名称:就是要注册什么样的对象

第三事件要有事件的处理程序:要执行的代码或结果

注册事件有两种方式,分别是行内式和内嵌式;

 

看完事件后 在看看innerTextinnerHTML的区别

例如

div id="box">

    <p>这是一些文字</p>
    <p>这是一些文字</p>
    <p id="p3">这是一些文字</p>
    <p>这是一些文字</p>
    <p>这是一些文字</p>
</div>
<script>
    // 获得事件源
    var box = document.getElementById("box");
    var p3 = document.getElementById("p3");
    console.log(box.innerText); // inner内部的  Text文本   内部的文本 只获取标签 之间的文本内容
    console.log(box.innerHTML); // 是获取标签之间的所有的内容,包括标签
    // 当标签之间只有文本信息的时候,效果是一样的
    console.log(p3.innerHTML);
    console.log(p3.innerText);
</script>

 

小结一下:

innerText与innerHTML之间的区别
相同:使用innerText和innerHTML都可以获得元素之间的内容;
不同点:
1、innerText:内部的文本 只获取标签之间的文本内容
2、innerHTML:获取标签之间的所有内容,包括标签(原样输出)
3、innerText在早期的火狐浏览器是不支持的,只支持textContent,新的版本火狐都支持;
4、innerText设置的时候,会原样输出,而innerHTML会将对应的标签渲染成正常的标签
当标签之间只有文本信息的时候效果是一样的。

今天就这样吧!

转载于:https://www.cnblogs.com/Ma-lulu/p/5743065.html

你可能感兴趣的文章
java易错题----静态方法的调用
查看>>
php建立MySQL数据表
查看>>
最简单的线程同步的例子
查看>>
旅途上看的电影和观后感
查看>>
Ztree异步树加载
查看>>
关于IE和火狐,谷歌,Safari对Html标签Object和Embed的支持问题
查看>>
poj3320 Jessica's Reading Problem(尺取思路+STL)
查看>>
分布式计算开源框架Hadoop介绍
查看>>
安卓平台接口剖析
查看>>
坏的事情不都会带来坏的结果
查看>>
RPC的基础:调研EOS插件http_plugin
查看>>
第二次团队冲刺第二天
查看>>
bzoj 2257 (JSOI 2009) 瓶子与燃料
查看>>
11)Java abstract class 和 interface
查看>>
使用xrdp或Xmanager 远程连接 CentOS6
查看>>
Linux误删恢复
查看>>
Unity调用Windows窗口句柄,选择文件和目录
查看>>
HashMap循环遍历方式
查看>>
React Native 入门 调试项目
查看>>
C# 通过 Quartz .NET 实现 schedule job 的处理
查看>>