JavaScript *** 作DOM（二）

一、节点关系

父子

父节点 --parentElement
所有子节点 --children
第一个子节点-- firstElementChild
最后个子节点 --lastElementChild

兄弟

上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling

例：

		节点关系查找
		
			
你好我是p1
			
你好我是p2
			
你好我是p3
			小小标题
		
		

二、属性 *** 作

getAttribute --获取属性
setAttribute --设置属性
removeAttribute --移除属性

例：

	
		属性修改
		

		修改图片
		
	

三、节点信息

js的DOM核心编程 ，每个元素都是一个节点，节点有不同类型有不同信息。

nodeName（节点的名称）

元素节点：返回的是元素标签名大写 例P。

文本节点：返回#text。

nodeType（节点的类型）

元素节点：1

文本节点：3

nodeValue(节点的值)

元素节点：none

文本节点：文本内容

例：

		属性修改
		
HI我是文本内容ABC
		
	

四、节点的 *** 作

1、创建节点--document.createElement(tag)

2、删除节点：
elem.remove()
elem.parentElment.removeChild(elem)

3、复制节点

复制节点 ,不带子节点
var elem2 = elem.cloneNode(false)

复制节点，带子节点
var elem3 = elem.cloneNode(true)

4、插入节点
parent.insertBefore(新的节点，相关节点)
把新的节点插入到 相关节点的前面

5、替换节点
parent.replaceChild(新的节点，被替换的节点)

例：

		节点的创建与插入
		创建并插入
		复制图片
		删除
		指定位置
		

		
咱们是一个p标签
		
		
	

五、表格 *** 作

1、创建行
row = table.insertRow(index)

2、创建列
col = row.insertCell(index)

3、设置列的内容
col.innerText="xxx"

4、选择第一行
table.firstElementChild.fristElementChild

例：

		 

			

				
书名
 
价格
 
 *** 作
			
				
精通js
 
16.8
 
删除
			
			
				
60个瞬间
 
32.2
 
删除
			
		 
		 增加一行
		 删除第一行
		修改标题
		
	 
	

六、select下拉框

1、创建一个option
var option = new Option(text,value)

2、插入一个option
select.add(option,before)

七、事件的注册

1、DOM()在html标签中。例

2、DOM1 实现js与html分离。
btn.οnclick=callMe;
btn.onclick = function(){}
(多次注册，只会执行最后一个)

3、DOM2 可以添加多个，也可以移除。
btn.addEventListener(“click”,callMe)
btn.addEventListener("click",function(){})

4、移除全部click。
btn.removeEventListenter("click")
移除一个
btn.removeEventListenter("click",callMe)

	   事件的监听
	   点我