HTML DOM定义了访问的操作HTML文档的标准方法,它把HTML文档呈现为带有元素,属性和文本的树枝结构,定义了访问HTML文档对象的属性,方法和事件。
HTML文档中的每个成分都是一个节点
整个文档是一个节点
每个HTML标签是一个节点
包含HTML元素中的文本是文本节点
每个HTML属性是一个属性节点
注释属于注释节点
首先我们创建几个标签
<style type="text/css">
.sp{
color: red;
}
</style>
<input type="button" name="btn" id="btn" value="点击">
<div id="div1">
这是div1
</div>
<div id="div2">
这是div2
</div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<span class="sp">
这是一个span标签
</span>
<p class="sp"></p >
然后要用各种方法获取标签
1.通过id属性获取元素
var div1=document.getElementById("div1")
div1.innerHTML="更改后的div"
2.通过标签名来获取标签
var divs=document.getElementsByTagName("div")
for(var i=0;i<divs.length;i++){
console.log(divs[i])
divs[i].innerHTML="更改后的div"
}
3.获取到所有属性class的值使sp标签
var els=document.getElementsByClassName("sp")
console.log(els)
4.通过name属性来获取标签
var names=document.getElementsByName("names")
console.log(names[0])
5.通过选择器名称来获取,只能获取一个
var quer=document.querySelector(".sp")
console.log(quer)
6.通过对应的选择器获取所有满足条件的标签
var query=document.querySelectorAll(.sp)
console.log(query)
7.通过标签的id属性的值获取标签
console.log(div1)
获取到标签后就可以对标签进行删除,条件,更改
删除
function dal(){
var li=document.querySelectorAll("li")[0]
ul.remove()删除全部 ul.removeChild(li)删除一个指定标签
}
新增
function add(){
var li=document.createElement("li")
li.innerHTML="添加一个新节点"
ul.appendChild(li)
}
更改
function upd(){
var li=document.querySelectorAll("li")[0]
li.innerHTML="更改后"
}