HTML DOM 基本操作

<div id="box" class="cla">
	<ul>
		<li id="list1"></li>
		<li id="list2"></li>
	</ul>
</div>

获取元素

//通过id名获取元素
document.getElementById('box')：
//通过标签名获取所有<div>元素，返回伪数组。
document.getElementsByTagName('div')：
//通过类名获取所有元素，返回伪数组。
document.getElementsByClassName ('cla')：
//通过CSS选择器获取符合条件的第一个元素。
document.querySelector('selector')：
//通过CSS选择器获取所有元素，返回伪数组。
document.querySelectorAll('selector')：

//获取父元素
oLi.parentNode;

//获取所有子元素，返回伪数组
oUl.children;

//获取上一个兄弟元素
oLi2.previousElementSibling;
//获取下一个兄弟元素
oLi1.nextElementSibling;

创建元素

//创建li元素节点（标签）
var oLi3 = document.createElement("li");
//创建文本节点
var oTxt = document.createTextNode("Hello World!");

添加元素

//在父节点中添加子节点
oLi3.appendChild(oTxt);
oUl.appendChild(oLi3);

//在指定的子节点前面插入新的子节点
oUl.insertBefore(oLi1, oLi0);

删除元素

//从父节点中删除子节点
oUl.removeChild(oLi3);

替换元素

//把oLi3子节点替换为oLi4子节点
oUl.replaceChild(oLi3, oLi4);

节点内容

//获取oDiv节点内的全部内容，包括标签和文本。可以赋值
oDiv.innerHTML;
//获取oDiv节点内的文本。可以赋值
oDiv.innerText;

属性操作

//添加(修改)属性值
oImg.setAttribute("src", "img/1.jpg");
//获取指定的属性值，返回字符串
oImg.getAttribute("src");
//获取指定的属性值，返回Attr对象
oImg.getAttributeNode("src");

类名操作

//添加cla类
oDiv.classList.add('cla');
//移除cla类
oDiv.classList.remove('cla');
//切换cla类，有则移除，无则添加
oDiv.classList.toggle('cla');
//检测是否存在cla类
oDiv.classList.contains('cla');

元素样式

//获取元素宽度。可以赋值
oDiv.style.width;
//获取元素display属性值。可以赋值
oDiv.style.display;