DOM编程

目录

• • DOM编程
  • 一，DOM编程对象
  • 二，DOM树
  • 三，Elemnt元素
  • 四，Element的常用方法
  • 五，通过js表格操作表格

一，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="