javascript通过dom可以访问html文档的所有元素。
它可以改变页面中所有的html元素、能够改变页面中所有的html属性、还可以改变所有css属性以及对页面中的所有事件做出反应。
以下归纳访问html元素的几种方法:
- 通过id查找html元素
- 通过类名查找html元素
- 通过标签名查找html属性
- 通过元素的name属性查找html元素
先看以下简单例子
<!DOCTYPE html>
<html>
<body>
<div class="hi">
<p class="hi" name="hi" id="hi">hello</p><br>
</div>
</body>
假设我们要通过javascript获取页面中p标签内的文本内容,并将它显示于页面上
- 通过id得到
<script>
var x=document.getElementById("hi");
console.log(x);
document.write("通过javascript获取内容为:"+x.innerHTML);
</script>
- 通过classname获得
<script> var x=document.getElementsByClassName("hi"); console.log(x); document.write("通过javascript获取内容为:"+x[1].innerHTML); </script>
分析:这里getElementsByClassName获取得到的是一个数组
其中x[0]为
<div class="hi">
<p class="hi" name="hi" id="hi">hello</p><br>
</div>
x[1]为
<p class="hi" name="hi" id="hi">hello</p><br>
- 通过tagname获得
<script>
var x=document.getElementsByTagName("p");
console.log(x);
document.write("通过javascript获取内容为:"+x[0].innerHTML);
</script>
分析:这里getElementsByTagName获取的也是数组,不过只包含一个元素
x[0]为
<p class="hi" name="hi" id="hi">hello</p><br>
- 通过name获取
<script>
var x=document.getElementsByName("hi");
console.log(x);
document.write("通过javascript获取内容为:"+x[0].innerHTML);
</script>
分析:这里getElementsByName获取的也是数组,只包含一个元素
x[0]为
<p class="hi" name="hi" id="hi">hello</p><br>