JavaScript.04.DOM树

最新推荐文章于 2024-12-01 07:30:00 发布

Champion_me

最新推荐文章于 2024-12-01 07:30:00 发布

阅读量638

点赞数 6

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Champion_me/article/details/123244896

版权

这里写目录标题

一、知识大纲
二、DOM树的概念
三、根据父级，子级，同级关系查询元素
四、增加图片实操
五、删除图片实操
六、复制图片实操
七、表格的增加与删除

一、知识大纲

在这里插入图片描述

二、DOM树的概念

1.DOM概念：DOM全称为：Document Object Model 中文名叫：文档对象模型
2.DOM树概念：
(1)DOM树中的节点类型和节点关系
在这里插入图片描述
(2)文档（document）：一个页面就是一个文档，同时也是网页中最大的父级元素
(3)元素（element）：页面中的所有标签都是元素，元素可以看成是对象
(4)节点（node）：页面中的内容都是节点：标签，文本
(5)root：根
解释：
document是根节点
上级和下级节点是父子关系：上级节点是下级节点的父节点，下级节点则是上级节点的子节点
同一级别的节点之间是“同级关系”，或者称为“同胞关系”

三、根据父级，子级，同级关系查询元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="div1">
		<img id="img1" src="img/1.gif" >
		<img id="img2" src="img/2.gif" >
		<img id="img3" src="img/3.gif" >
	</div>
	<script type="text/javascript">
		//网页中最大的父级元素是document
		
		//parent
		console.log(img1.parentElement)//拿到他的父级元素
		//img1的父元素设置一个背景颜色
		img1.parentElement.style.background="yellow"
		//查询div中所有的子元素
		console.log(div1.children)
		//查询div中有几个子元素
		console.log(div1.children.length)
		console.log(div1.childElementCount)
		//查询第一个子节点和最后一个子节点
		console.log(div1.firstElementChild,div1.lastElementChild)
		//拿到上一个或者下一个（只适用于同级关系）
		console.log(img2.previousElementSibling)
		console.log(img2.nextElementSibling)
	</script>
	</body>
</html>

四、增加图片实操

1.document.createElement(TaName)：根据标签名创建Element元素
2.Element.setAttribute(name,value)：设置标签中的属性
3.Element.appendChild(Node)：在内容末尾添加子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="div1">
		<img id="img1" src="img/1.gif" >
		<img id="img2" src="img/2.gif" >
		<img id="img3" src="img/3.gif" >
	</div>
	<script type="text/javascript">
		function fn2(){
			//先创建一个图片标签
			var i=document.createElement("img")
			//设置标签上的属性   Attribute属性
			// i.setAttribute("src","img/4.gif")//下面是简写
			i.src="img/4.gif"//这种方式不是所有的属性都能用
			//把图片标签放到div中
			div1.appendChild(i)
		}
	</script>
	<button onclick="fn2()">增一张图片</button>
	</body>
</html>

五、删除图片实操

1.Element.lastElementChild：获得最后一个子元素
2.Element.removeChild(Node)：移除子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="div1">
		<img id="img1" src="img/1.gif" >
		<img id="img2" src="img/2.gif" >
		<img id="img3" src="img/3.gif" >
	</div>
	<script type="text/javascript">
		function fn3(){
			//每点击一次  删除最后一张
			var i=div1.lastElementChild
			//删除  通过父元素  来删除  子元素
			div1.removeChild(i)
		}
	</script>
	<button onclick="fn3()">删除最后一张图片</button>
	</body>
</html>

六、复制图片实操

1.Element.cloneNode(boolean)：复制节点（是否复制子节点/默认是false）
2.Element.setAttribute(name,value)：设置标签中的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="div1">
		<img id="img1" src="img/1.gif" >
		<img id="img2" src="img/2.gif" >
		<img id="img3" src="img/3.gif" >
	</div>
	<script type="text/javascript">
		function fn4(){
			//复制节点
			var d=div1.cloneNode(true)
			//节点复制的时候把属性带过去了
			//设置标签中的id
			d.setAttribute("id","")//下面是简写
			// d.id=""
			
			//加到body中
			document.body.appendChild(d)
		}
	</script>
	<button onclick="fn4()">复制div</button>
	</body>
</html>

七、表格的增加与删除

1.这里要注意的是表格有三个部分：(1)thead (2)tbody (3)tfoot
（在不指明位置时，表格里所有的元素默认放在tbody中，所以表格中元素的父级是tbody，不是table）
2.tr.innerHTML="" ：删除标签里的内容
3.tr.outerHTML="" ：删除标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border id="table">
        <tr>
            <td><input type="checkbox" onclick="fn1(this.checked)"></td>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>商品操作</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>🍌🍌🍌🍌</td>
            <td>18.9</td>
            <td>
                <button>删除</button>
            </td>
        </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍌🍌🍌🍌</td>
        <td>18.9</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍌🍌🍌🍌</td>
        <td>18.9</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍌🍌🍌🍌</td>
        <td>18.9</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍌🍌🍌🍌</td>
        <td>18.9</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
</table>
<script>
    var fn1=(status)=>{
        //找到页面中所有的输入框（多选框）
        //页面中拿元素: id,标签名，类名，名字
        var is=document.getElementsByTagName("input")
        //设置状态和status相同
        for(let i of is){
            i.checked=status
        }
    }

    function load() {
        //css选择器来选择元素
        for(let i of document.querySelectorAll("td button")){//所有的td标签里面的button都会被找出来
            //i是表格中每一个按钮
            i.onclick=del//不用加括号
        }
    }

    function del() {
        //找到tr
        //this 谁调用了这个函数  this就是谁
        var tr=this.parentElement.parentElement
        //根据tr拿到父元素  根据父元素删除tr
		//tr.parentElement.removeChild(tr)
        
		//根据table拿到第一个儿子
		//table.firstElementChild.removeChild(tr)

        //去除该标签中的内容
        //tr.innerHTML=""

        tr.outerHTML=""

    }

    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 d1=tr.insertCell()
        var d2=tr.insertCell()
        var d3=tr.insertCell()
        var d4=tr.insertCell()
        //内容     直接把一个元素变成一个字是不合适的所有要. 
        d1.innerHTML='<input type="checkbox">'
        d2.textContent="🍉🍉🍉🍉🍉"
        d3.textContent="90.0"
        d4.innerHTML="<button>删除</button>"
        load()//重新给按钮设置点击事件
    }

    load()
</script>
<button onclick="delLast()">删除表格最后一行</button>
<button onclick="delAll()">删除表格所有数据</button>
<button onclick="addRow()">增加表格数据</button>
</body>
</html>