DOM介绍
javascript组成:
ECMAScript
BOM:浏览器对象模型
DOM(Document Object Model):文档对象模型
DOM是(Document(文档) Object(对象) Model(模型) )浏览器对象模型,今天我就带大家来学习一下DOM的编程小知识。
DOM树:
document也是一个Element对象,它处于DOM树的最上级
Element对象 :HTML标签对象,也是一个节点Node对象
Node : 节点对象
Element常用属性:
Element指的是某个元素(被定义出来的标签)
Element.children : 获得该元素中的所有子元素标签
Element.childElementCount : 获得该元素中的子元素的个数
Element.firstElementChild : 获得第一个子元素
Element.lastElementChild : 获得最后一个子元素
Element.nextElementSibling : 获得下一个相邻元素
Element.previousElementSibling : 获得上一个相邻元素
Element.parentElement : 获得父级元素
<body>
<p id="test1">
<ul id="test2">
<li>L1</li>
<li>L2</li>
</ul>
</p>
<script>
console.log(test2.children)//获得该元素中的所有子元素标签
console.log(test2.childElementCount)//获得该元素中的子元素的个数
console.log(test2.firstElementChild)//获得第一个子元素
console.log(test2.lastElementChild)//获得最后一个子元素
console.log(test2.nextElementSibling)//获得下一个相邻元素
console.log(test2.previousElementSibling)//获得上一个相邻元素
console.log(test2.parentElement)//获得父级元素
</script>
</body>
效果如下(网页放大200%):
-
有时候就算一个标签在某个标签内也不能算是这个标签的子元素,如上图中控制台输出的,ul标签的parent类是body标签而非p标签;
-
如果没有相邻的上一个或者下一个标签的话,则会输出null。
常用方法:
Element.getAttribute(name) : 获取标签中的属性(没有的属性都为null)
Element.setAttribute(name,value) : 设置标签中的属性
<body>
<p id="test">test</p>
<script>
console.log(test.getAttribute("value"))//获取标签中的属性
test.setAttribute("value","test2")//设置标签中的属性
console.log(test.getAttribute("value"))//获取标签中的属性
</script>
</body>
效果如下(网页放大200%):
document.createElement(TagName) : 根据标签名创建Element元素
Element.appendChild(Node) :在内容末尾添加子节点
<body>
<p id="test">test</p>
<script>
var u1=document.createElement("ul")//根据标签名创建Element元素
u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
test.appendChild(u1)//在内容末尾添加子节点
</script>
</body>
效果如下(网页放大200%):
Element.insertBefore(Node1,Node2):将Node1插入在Element中的子元素Node2前面(Node2为null即可实现末尾插入)
<body>
<p id="test">test</p>
<script>
//Element.insertBefore(Node1,Node2)的使用
var u1=document.createElement("ul")//根据标签名创建Element元素
u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
test.appendChild(u1)//在内容末尾添加子节点
var u2=document.createElement("ul")
u2.innerHTML="<li>L2</li>"
test.insertBefore(u2,u1)//将Node1插入在Element中的子元素Node2前面(Node2为null即可实现末尾插入)
</script>
</body>
效果如下(网页放大200%):
Element.after(Node) : 在节点后面添加节点
<body>
<p id="test">test</p>
<script>
var u1=document.createElement("ul")//根据标签名创建Element元素
u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
test.after(u1)// 在节点后面添加节点
</script>
</body>
效果如下(网页放大200%):
Element.before(Node) : 在节点前面添加节点
<body>
<p id="test">test</p>
<script>
var u1=document.createElement("ul")//根据标签名创建Element元素
u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
test.before(u1)//在节点前面添加节点
</script>
</body>
效果如下(网页放大200%):
Element.cloneNode(boolean) : 复制节点(是否复制子节点)
Element.removeChild(Node) : 移除子节点
<body>
<p id="test"><b>test</b></p>
<script>
console.log(test.cloneNode(true));//复制节点(复制子节点)
console.log(test.cloneNode(false));//复制节点(不复制子节点)
test.parentElement.removeChild(test)//自己让自己的老子删除自己
</script>
</body>
效果如下(网页放大200%):
Element.replaceChild(Node1,Node2) : 将Node1替换掉子节点Node2
<body>
<p id="test"><b>test</b></p>
<script>
var u1=document.createElement("ul")//根据标签名创建Element元素
u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
test.appendChild(u1)//在内容末尾添加子节点
var u2=document.createElement("ul")
u2.innerHTML="<li>L2</li>"
test.replaceChild(u2,u1)// 将Node1替换掉子节点Node2
</script>
</body>
效果如下(网页放大200%):
- 使用Element.appendChild插入的标签会变成Element的子元素
<body>
<p id="test">test</p>
<script>
var p2=document.createElement("ul")
p2.innerHTML="<li>1</li>"
test.appendChild(p2)
console.log(test.children);
</script>
</body>
效果如下(网页放大200%):
使用JS操作表格:
DOM结构中,table标签的子节点是tbody
table.rows : 表格中的行的集合
row.cells : 一行中的列的集合
table.insertRow(i) : 在表格中为i的位置插入一行
row.insertCell(i) : 在行中为i的位置插入一列
table.deleteRow(i) : 删除第i行
- 在表格中,行和列的下标都是从0开始的
- 行和列的最后一行的下标为 -1
<body>
<table id="table" border="">
<tr id="row">
<td>test1</td>
</tr>
<tr>
<td>test2</td>
</tr>
<tr>
<td>test3</td>
</tr>
</table>
<script>
console.log(table.rows);//表格中的行的集合
console.log(row.children);//一行中的列的集合
var r1=table.insertRow(-1)//在表格中为-1(最后一行)的位置插入一行
var c1=r1.insertCell(0)//在行中为0(第一行)的位置插入一列
c1.textContent="test4"
table.deleteRow(0)//删除第0(第一行)行
</script>
</body>
效果如下(网页放大200%):
以上就是本文所有的内容了,谢谢观看,我之后还会写一些与HTML相关的文章,喜欢的可以点个赞+收藏+关注。