您的位置：首页 > Web前端 > Node.js

DOM-childNodes,parentNode,className,createElement,insertBefore,removeChild

2017-06-16 17:13 246 查看
sha1、childNodes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script type="text/javascript">
window.onload=function(){
var ou=document.getElementById('ul1')
// console.log(ou.childNodes.length)
// childNodes包括文本节点、元素节点
// alert(ou.childNodes.length)
// alert(ou.children.length)  --- 常用

for (var i = ou.childNodes.length - 1; i >= 0; i--) {
// nodeType==3 ->  文本节点
// nodeType==1 ->  元素节点
// alert(ou.childNodes[i].nodeType)
if(ou.childNodes[i].nodeType==1){
ou.childNodes[i].style.background='red'
}
}
}
</script>
<body>
<!-- dom基础 -->
<ul id="ul1">
<li>我是元素节点</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
我是文本节点
</body>
</html>
2、DOM操作元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var ot=document.getElementById('t1')
var ob=document.getElementById('b1')

ob.onclick=function(){
// ot.value='元素操作第一种方法：style'
// ot['value']='元素操作第二种方法'
ot.setAttribute('value','元素操作第三种方法：DOM')
}
}
</script>
</head>
<body>
<input type="text" name="" id="t1">
<input type="button" value="按钮" id="b1">
</body>
</html>
3、className操作元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script type="text/javascript">
//getByClass()：通过class选取元素
function getByClass(oParent,sClass){
var aResult=[]
var aElement=oParent.getElementsByTagName('*')
for (var i = aElement.length - 1; i >= 0; i--) {
if(aElement[i].className=sClass){
aResult.push(aElement[i])
}
}
return aResult
}
window.onload=function(){
var oul1=document.getElementById('ul1')
// var ali=oul1.getElementsByTagName('li')
// for (var i = oul1.length - 1; i >= 0; i--) {
//     if(ali[i].className=="box"){
//         ali[i].style.background='red'
//     }
// }

var aBox=getByClass(oul1,'box')

for (var i = aBox.length - 1; i >= 0; i--) {
aBox[i].style.background='red'
}

}
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li></li>
</ul>
</body>
</html>
4、DOM创建元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function () {
// body...
var ob=document.getElementById('b1')
var oul=document.getElementById('ul1')
var ot=document.getElementById('t1')

ob.onclick=function(){
var oli=document.createElement('li')

oli.innerHTML=ot.value
oul.appendChild(oli)
// 父级ou1上调用子节点oli
}
}
</script>
</head>
<body>

<input id="t1" type="text" name="" value="" >
<input id="b1" type="button" value="createLi">

<ul id="ul1">

</ul>
</body>
</html>
5、DOM插入元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function () {
// body...
var ob=document.getElementById('b1')
var oul=document.getElementById('ul1')
var ot=document.getElementById('t1')

//ali:获取ul的所有li元素
var ali=oul.getElementsByTagName('li')

ob.onclick=function(){
var oli=document.createElement('li')
oli.innerHTML=ot.value
if(ali.length>0){
oul.insertBefore(oli,ali[0])
}else{
oul.appendChild(oli)
}

}
}
</script>
</head>
<body>

<input id="t1" type="text" name="" value="" >
<input id="b1" type="button" value="createLi">

<ul id="ul1">

</ul>
</body>
</html>
6、DOM删除元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oul=document.getElementById('ul1')
var aA=oul.getElementsByTagName('a')

for (var i = aA.length - 1; i >= 0; i--) {
aA[i].onclick=function () {
oul.removeChild(this.parentNode)
// body...
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>1<a href="javascript:;">删除</a></li>
<li>22<a href="javascript:;">删除</a></li>
<li>333<a href="javascript:;">删除</a></li>
<li>4444<a href="javascript:;">删除</a></li>
<li>55555<a href="javascript:;">删除</a></li>
<li>666666<a href="javascript:;">删除</a></li>
</ul>
</body>
</html>
7、文档碎片，使用较少
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oul=document.getElementById('ul1')
// var aA=oul.getElementsByTagName('a')
var ofrag=document.createDocumentFragment()

for (var i = 100 - 1; i >= 0; i--) {
var oli=document.createElement('li')
ofrag.appendChild(oli)
}
oul.appendChild(ofrag)
}
</script>
</head>
<body>
<ul id="ul1">

</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  dom
相关文章推荐
新的分享
章节导航