选取DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test-div">
<p id="test-js">javascript</p>
<p>Java</p>
</div>
<script>
var p_element = document.getElementById("test-js");
p_element.innerHTML= "java";//p标签中的内容
p_element.style.color='#ff0000';//颜色
p_element.style.fontWeight = 'bold';//粗细
</script>
</body>
</html>
插入DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
<script>
var js = document.getElementById("js");//p标签--JavaScript
var list = document.getElementById("list");//div标签
//插入原有的标签,原有的标签会被删除,然后插到新的位置
list.appendChild(js);//将p添加到div的最后一项
//创建新的标签并且插入
var new_p = document.createElement('p');
new_p.id = 'new_p';
new_p.innerHTML = '天才';
list.appendChild(new_p);
</script>
</body>
</html>
对DOM 进行排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol id="test-list">
<li class="lang">Scheme</li>
<li class="lang">JavaScript</li>
<li class="lang">Python</li>
<li class="lang">Ruby</li>
<li class="lang">Haskell</li>
</ol>
<script>
var ol = document.getElementById("test-list");//获取列表标签
var li = document.getElementsByClassName("lang");//获取列表项标签
var li_value = [];//创建一个存放列表值的数组
//先取值,再排序
for(var x in li){
li_value.push(li[x].innerHTML);
}
li_value.sort();
for(var i in li){//排序之后修改原来的次序
li[i].innerHTML = li_value[i];
}
</script>
</body>
</html>
DOM删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="test-list">
<li>JavaScript</li>
<li>Swift</li>
<li>HTML</li>
<li>ANSI C</li>
<li>CSS</li>
<li>DirectX</li>
</ul>
<script>
var ul = document.getElementById("test-list");//获取父节点
var li = ul.children;//获取所有子节点
var i =0 ;
while(i<li.length){
if(li[i].innerText==="JavaScript"
||li[i].innerText==="HTML"
||li[i].innerText==="CSS")
{
i++;
}
else
{
ul.removeChild(li[i]);//删除不符合要求的节点
}
}
</script>
</body>
</html>
DOM增删改的简单使用
最新推荐文章于 2021-07-17 22:54:18 发布