在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会将对应的标签渲染成正常的标签
当标签之间只有文本信息的时候效果是一样的。
今天就这样吧!