欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML DOM 操作

程序员文章站 2024-03-20 09:20:22
...
<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;