上节课我们讲了BOM,这节课我们来讲讲DOM,啊哈哈,它们是不是长的差不多,接下来就让我就详细讲一讲吧!
一.DOM
DOM全称:Document Object Model
DOM就是文档对象模型
HTML中的关系图:
二.Element常用属性(Element 又称 元素)
Element.Children | 获得该元素中的所有子元素标签 |
---|---|
Element.ChildElementCount | 获得该元素中的子元素的个数 |
Element.firstElementChild | 获得第一个子元素 |
Element.lastElementChild | 获得最后一个子元素 |
Element.nextElementSibling | 获得下一个相邻元素 |
Element.previousElementSibling | 获得上一个相邻元素 |
Element.parentElement | 获得父级元素 |
浅补充一下吧:
HTML是最大的父类,它有两个儿子(子元素):head和body
网页中最大的父级元素(element)是:document表格的三大部分:
thead tbody tfoot
接下来就看看关于Element常用属性的一些小案例
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例1</title>
</head>
<body>
<div id="div">
<img id="y" src="img/1.gif">
<img id="y1" src="img/2.gif">
<img id="y2" src="img/3.gif">
</div>
<script>
//元素.parentElement 是获得父级元素的方法
console.log(y.parentElement);
//给y的父级元素设置一个背景颜色
y.parentElement.style.background="yellow";
//查询div中的所有元素
console.log(div.children);
//知道div中有几个子元素
console.log(div.children.length);
console.log(div.childElementCount);
//知道div的第一个子元素和最后一个子元素
console.log(div.firstElementChild,div.lastElementChild);
//拿前一个元素
console.log(y1.previousElementSibling);
//拿后一个元素
console.log(y1.nextElementSibling);
function f1(){
//先创建一个图片标签
var i=document.createElement("img");
//设置标签上的属性
//i.setAttribute("src","img/4.gif")
i.src="img/4.gif";//如果是自定义的属性,那就不能用这个简写,那就要用上面那条
//把img标签放到div中
div.appendChild(i); //追加一个孩子,就是加一个子元素
}
//Node Element 看作是同一种东西 标签或者是元素
function f2(){
//每点击一次,就删除最后一张
var d=div.lastElementChild;
//删除 通过父元素来删除子元素
div.removeChild(d);
}
function f3(){
//复制节点 cloneNode(boolean);
var d=div.cloneNode(true);
//节点复制的时候,把属性也带过去了,所以id重复了
//解决方法:把id改了
//d.id=""; //第一种方法
d.setAttribute("id","");//第二种方法
//加到body中
document.body.appendChild(d);
}
</script>
<img src="img/4.gif" alt="">
<button onclick="f1()">增加一张图片</button>
<button onclick="f2()">删除一张图片</button>
<button onclick="f3()">复制div</button>
</body>
</html>
得出来的结果就是这样的:
注:因为图片不能超过5M,所以复制div的那条就没有展现出来了
三.Element的常用方法以及使用JS操作表格
Node 也称 元素!
接下来让我们看看”使用JS操作表格“有哪些方法吧
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例2</title>
</head>
<body>
<table border="2" id=table>
<tr>
<td> <input type="checkbox" onclick="f(this.checked)"></td>
<td> 商品名字</td>
<td> 商品价格</td>
<td> 商品操作</td>
</tr>
<tr>
<td> <input type="checkbox" ></td>
<td> 香蕉</td>
<td> 34.0</td>
<td><button>删除</button></td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 苹果</td>
<td> 64.0</td>
<td><button>删除</button></td>
</tr>
<tr>
<td> <input type="checkbox" ></td>
<td> 芒果</td>
<td> 154.0</td>
<td><button onclick="del(this)">删除</button></td>
</tr>
</table>
<script>
function load(){
//css选择器来选择元素
for(let i of document.querySelectorAll("td button")){
//i是表格中每一个按钮
i.onclick=del;
}
}
/**
* 表格有三部分:
* thead tbody tfoot
*/
// //css选择器来选择元素
// for(let i of document.querySelectorAll("td button")){
// //i是表格中每一个按钮
// i.onclick=del;
// }
function del(){
//找到tr
//this 谁调用了这个函数,this就是谁
var t= this.parentElement.parentElement
//根据tr拿到父元素 根据父元素删除tr
t.parentElement.removeChild(t);
// table.firstElementChild.removeChild(t);
//t.innerHTML=""; 去除该标签中的内容,并没有删除tr标签
t.outerHTML-"";//连tr标签一起删了
}
var f=(zt)=>{
//找到页面中的所有输入框
//去页面中拿元素:id,标签名,类名,名字
var is=document.getElementsByTagName("input");//根据标签名拿
//设置状态和zt相同
for(let i of is){
i.checked=zt;
}
}
function delLast(){
if(table.rows.length>1){
table.deleteRow(-1);
}
}
function delAll(){
while(table.rows.length>1){
table.deleteRow(-1);
}
}
function addRow () {
var tr=table.insertRow();
var t1=tr.insertCell();
var t2=tr.insertCell();
var t3=tr.insertCell();
var t4=tr.insertCell();
//内容
t1.innerHTML='<input type="checkbox">'
t2.innerHTML="蓝莓"
t3.innerHTML='90.0'
t4.innerHTML='<button>删除</button>'
load();
}
load();
</script>
<button onclick="delLast()">删除表格中最后一行</button>
<button onclick="delAll()">删除表格中所有数据</button>
<button onclick="addRow()">增加一行数据</button>
</body>
</html>
运行结果为下:(可以删除一行,也可以删除所有,也可以增加,还可以在按钮上点击删除)
好啦~今天的小课堂差不多就到这里啦~( •̀ ω •́ ) ,期待我们下次见面!
永远不要对自己说No,不管什么艰难的事情,一步一步来总会好的,加油