DOM是Document Object Model的缩写，简称文档对象模型,，先来看一下DOM树结构图：
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
访问HTML元素节点常用的有3种方式
1.通过 id 访问 HTML 元素
document.getElementById
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>
</head>
此外用className选择元素.实现有2步
1.选出所有元素
2.通过className条件筛选
示例：将class="box"的li的背景颜色变为红色
<script type="text/javascript">
window.οnlοad=function ()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var i=0;
for(i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
运行结果：
封装成函数
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.οnlοad=function ()
{
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl, 'box');
var i=0;
for(i=0;i<aBox.length;i++)
{
aBox[i].style.background='yellow';
}
}
</script>
实现效果和之前的效果是一致的
通过dom操作 改变HTML内容
1.改变 HTML 输出流
document.write("hello");
2.改变 HTML 内容
document.getElementById("demo").innerHTML="51code";
3.改变HTML样式
document.getElementById("test").style.background="red";
转载于:https://my.oschina.net/u/2971691/blog/789454