高级DOM编程_Elemen元素，表格的js操作

DOM编程

一，DOM编程对象

父类，与java有异曲同工之妙的是，javascript中也存在父类（基类），不过，在java中最大的父类是object，因为所有的类都直接或间接的继承object，而在javascript中，document才是最大的父类，通俗的讲，document是文档，为整个HTML网页的根本。
DOM也就是动态解析文档，生成DOM树

二，DOM树

document也是一个Element对象，它处于DOM的上级；
Element对象：HTML标签对象，也就是一个节点Node对象；
Node:节点对象；
获取父类元素：

Element.parentElement;
//Element为元素

三，Elemnt元素

下面是一些常用属性:

Element.children //获取该元素中的所有子元素标签
			Element.childElementCount//获取该元素中的子元素的个数
			Element.firstElementChild//获取第一个子元素
			Element.lastElementChild//获取找一个子元素
			Element.nextElementSibling//获取下一个相邻元素
			Element.previousElementSibling//获取上一个相邻元素
			

四，Element的常用方法

1.根据标签名来创键element元素

// Element.createElement(TagName);
        //先创建一个图片标签
        var i=document.createElement("img")

2.获取，设置标签的属性

//获取标签属性：
        i.getAttribute();//括号内放标签名
//设置标签上的属性
        //i.setAttribute("src","img/4.gif")
        //简写:      
        //这种方式不是所有的属性都能用
        i.src="img/4.gif"
        //Element.属性="";

3.增加子节点

// 增加子节点
	// 1内容末尾添加子节点
	Eelement.appendChild(Node);
	// 2.将node1插到element元素的子节点node2前
	// 如果node2为null可直接插入实现末尾插入
	Element.insertBefore(node1,node2);
	// 3.在node后添加node
	Eelement.after(Node)
	// 4.在node前添加node
	Eelement.before(Node)
	

4.复制节点

 //复制节点
        var d=div.cloneNode(true)
		// 括号内为boolea类型
		// true：就是将整个节点全部复制过去，包括子节点
		// false：将节点躯壳复制过去

5.移除节点

 //删除 通过父元素 来删除 子元素
// 删除移除节点
		Eelement.removeChild();

6替换节点

// 替换节点
		// 将node1替换为node2
		Element.replaceChild(node1,node2);

五，通过js表格操作表格

表格与其他的元素不同，它的table类下还有子类，并不是直接为tr

<table >
<thead></thead>//头
<tbody></tbody>//身
<tfoot></tfoot>//脚
<!-- 如果没写这些标签，默认所有的标签放在tbody中 -->
</table>

1.删除表格内容

// 删除表格的内容
// 删除最后一行
    function delLast(){
        if(table.rows.length>1)//如果行的长度大于1就删
            table.deleteRow(-1)
    }
// 一键全部删除
    function delAll() {
        while(table.rows.length>1){
            table.deleteRow(-1)
        }
    }

2 .增加表格
一个一个拿到到表格框架标签，然后赋值

function addRow() {
        var tr=table.insertRow()
        var d1=tr.insertCell()//1
        var d2=tr.insertCell()//2
        var d3=tr.insertCell()//3
        var d4=tr.insertCell()//4
        //内容
        d1.innerHTML='<input type="checkbox">'
        d2.textContent="🍉🍉🍉🍉🍉"
        d3.textContent="90.0"
        d4.innerHTML="<button>删除</button>"
        load()//重新给按钮设置点击事件
    }

    load()

值得一提的是，我们在写表格删除的时候要删除表格一行或一列的内容时，需要将这个行或列传入到自己编写的删除function中，通过this方式拿到自己再拿到自己的父类进行函数的调用实现删除功能；

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

在表格的删除功能中可能会遇到我们的新增行要删除时删除无反应，这其实是我的删除函数中没有拿到新增的行的信息，我们只需要在删除之前将表格的所有行拿到（通过css选择器），然后再调用删除函数就可以了，但需要注意的是，在新增行后需要两次调用函数。同时 ，我们还需要给表格里的删除按钮设置点击事件。

// 刷新表格的方法，类似于java的load()
    function load() {
        //css选择器来选择元素
        for(let i of document.querySelectorAll("td button")){
            //i是表格中每一个按钮
            i.onclick=del
        }
    }
    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="3.0"
        d4.innerHTML="<button>删除</button>"
        load()//重新给按钮设置点击事件
        //1次调用
    }
    load()
    //2次调用

最后给大家带来一个总结直观图

好了，今天就给大家分享到这里了，如果喜欢博主的可以来一波三连！！！