js中DOM知识点分享
程序员文章站
2022-04-24 10:58:33
...
1、childNodes和nodeType
childNodes获取子节点，但是会把中一个标签与另一个标签的空格当做文本节点来计算。nodeType判断一个节点是什么类型的节点。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
2、children获取子节点，它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
3、offsetParent获取该节点有定位的父元素节点。
4、firstChild()和firstElementChild()，有兼容问题，使用if来处理兼容问题。其余lastchild等的也是和这个相类似。
5、使用dom来获取元素属性，使用setAttribute(‘要设置的属性’，‘设置属性的值’),removeAttribute(名称)，getAttribute（名称），基本不常用。但也有必须用的情况。
6、使用className来选择元素，可以封装一个简单的方法，现在这个是低版本的，没有bug，但是有很强的局限性
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">
<ul>
<li class="box"></li>
<li></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
</p>
</body>
<script>
function getByClass(oParent,sClass){
//*号代表通配符
var aResult=[]; var aEle = oParent.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++){ if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
} return aResult;
} var p1 = document.getElementById('p1'); var aBox = getByClass(p1,'box'); for(var i=0;i<aBox.length;i++){
aBox[i].style.backgroundColor='red';
} </script></html>
7、创建节点比如论坛功能
一定要把创建好的节点加入到他的父元素下面
creatElement（）创建节点
appendChild()将创建好的节点添加到他的父元素之前
insertBefore()在某个节点之前插入
removeChild()删除某个节点
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>创建节点</title>
<script>
window.onload=function(){
var oUl = document.getElementById('oUl'); var oBtn = document.getElementById('btn'); var input1 = document.getElementById('input1'); var aLi = document.getElementsByTagName('li');
oBtn.onclick=function(){
var oLi = document.createElement('li');
oLi.innerHTML=input1.value; if(aLi.length>0){
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
}
}
} </script>
</head>
<body>
<p>
<input id="input1" type="text" />
<input id='btn' type="button" value="创建" />
<ul id='oUl'>
</ul>
</p>
</body></html>
相关推荐：
以上就是js中DOM知识点分享的详细内容，更多请关注其它相关文章！
下一篇： 详解PHP会话存储方式_PHP教程