DOM是Document Object Model的缩写,简称文档对象模型
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
一、访问HTML元素节点
1.通过 id 访问 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
使用document.getElementById方法访问HTML元素
如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。
如果未找到该元素,则 x 将包含 null。
2.通过标签名访问 HTML 元素
document.getElementsByTagName
3.通过类名访问 HTML 元素
document.getElementsByClassName
<head>
<title></title>
<p id="demo" class="hello">你好</p>
<p id="test">世界</p>
<script type="text/javascript">
//id
var p1=document.getElementById("demo");
console.log(p1);
var res1=p1.innerHTML;
console.log(res1);
//标签名
var p2=document.getElementsByTagName("p");
console.log(p2);
var res2=p2[1].innerHTML;
console.log(res2);
//类名
var p3=document.getElementsByClassName("hello");
var res3=p3[0].innerHTML;
console.log(res3);
</script>
三、改变HTML内容
1.改变 HTML 输出流
通过document.write直接改变HTML页面的内容
document.write("hello");
2.改变 HTML 内容
通过innerHTML属性直接修改HTML的内容
document.getElementById("demo").innerHTML="51code";
3.改变HTML样式
document.getElementById("test").style.background="red";