获取页面元素的几种方式

在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