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;
上一篇: HDU1754(线段树)