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;
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值