获取页面元素的几种方式

在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中的事件；

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

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

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

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

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

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

看完事件后 在看看innerText与innerHTML的区别

例如

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会将对应的标签渲染成正常的标签

当标签之间只有文本信息的时候效果是一样的。

今天就这样吧！