在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>
小结一下:
今天就这样吧!