节点

整个html文档 文档节点
文件中的所有标签 元素节点
标签的属性 属性节点
标签中的文本 文本节点
注释 注释节点

预加载事件:等文档中的元素及资源加载完毕后才执行的事件
1、window.οnlοad=function(){
}
2、在body标签上写onload事件

html代码从上往下执行,当获取的元素写在dom元素之前时,代码还未走到dom元素,此时无法找到dom对象,会返回null;
		
获取节点
方法						 	描述
getElementById() 			根据 id 获取 dom 对象,如果 id 重复,那么以第一个为准
getElementsByTagName() 		根据标签名获取 dom 对象数组
getElementsByClassName() 	根据样式名获取 dom 对象数组
getElementsByName() 		根据 name 属性值获取 dom 对象数组,常用于多选获取值

javascript:void(0); 伪协议,表示a标签不执行href属性的跳转行为,而去执行点击事件
javascript:函数名(); 不执行跳转,执行函数

创建节点
		方法 						描述
		createElement() 		创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象
		createTextNode() 		创建一个文本节点,可以传入文本内容
		innerHTML 				也能达到创建节点的效果,直接添加到指定位置了
		
	插入节点
		方法 						描述
		write() 				将任意的字符串插入到文档中
									document.write()在加载文档时使用,会和当前文档使用同一个document对象,所以写入的内容会显示在原来的内容之后;
									document.write()在加载文档之后使用(点击按钮触发事件使用),此时document是一个新的对象,会将原来的document对象覆盖,所以原来页面中的内容也会被覆盖。
									不要在使用document.write()方法之后去获取元素节点
		appendChild() 			向元素中添加新的子节点,作为最后一个子节点
		insertBefore() 			向指定的已有的节点之前插入新的节点
								newItem:要插入的节点
								exsitingItem:参考节点 
								需要参考父节点

间接查找节点
		方法|属性 				描述
		childNodes () 		返回元素的一个子节点的数组 (包括文本节点)
		firstChild() 		返回元素的第一个子节点
		lastChild() 		返回元素的最后一个子节点
		nextSibling 		返回元素的下一个兄弟节点
		parentNode 			返回元素的父节点
		previousSibling 	返回元素的上一个兄弟节点


替换节点
		方法|属性 							描述
		replaceChild(newNode,oldNode) 	用新的节点替换旧的节点
			oldNode.parentNode.replaceChild(newNode,oldNode)
			首先通过旧节点定位到父节点,然后用新的节点替换旧节点
	克隆节点
		方法|属性 				描述
		cloneNode() 		复制节点
			var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
			true:深度克隆,可以克隆结构和内容
			false(默认值):只克隆结构

删除节点
		方法|属性 			描述
		removeChild() 	从元素中移除子节点
		
		从父元素中删除节点,获取要删除对象的父元素,然后从父元素中删除该对象
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>