js DOM树

DOM树

DOM,全称Document Object Model文档对象模型。
	节点:Node
		——构成HTML文档最基本的单元。
		
		 常用节点分为四类	 
		一文档节点:整个HTML文档
		一元素节点:HTML文档中的HTML标签
		一属性节点:元素的属性
		一文本节点:HTML标签中的文本内容

在这里插入图片描述
在这里插入图片描述

			1. getElementById()
			一通过id属性获取一个元素节点对象
			2. getElementsByTagName()
			-通过标签名获取一组元素节点对象
			3. getElementsByName()
			一通过name属性获取一组元素节点对象

在这里插入图片描述

var res = document.getElementById("byt");
//按钮里面的文字 res.innerHTML
console.log(res.innerHTML); 
res.innerHTML = "hhjkkjjk";
		<button id = "byt">这是一个按钮</button>
		 <!-- 这种写法结构和功能耦合,不方便维护 -->
		<button id="btn2" onmousemove='alert("hhhh")'>我是一个按钮</button>
		<button id="btn3">我是个按钮3</button>
		
<script type="text/javascript">
			//获取按钮对象
			var btn = document.getElementById("btn3");
			//可以为按钮的对应的事件绑定处理方法函数的形式 来响应事件,相应的事件触发时,气对应的函数会被调用
			btn.onmousemove = function(){
				alert("你干嘛");
			};
</script>
浏览器在加载一个页面时,是按照自上向下的顺序加载的,
读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载
		所以如果要一定把script标签卸写在上面head的话,必须要等页面加载完成再执行,可以
		用window.onload
		
		onload事件会在整个页面加载完成之后才触发,为window绑定一个onload事件,确保对象执行时,
		所有dom都加载完毕。不会出现无法获取到dom对象的现象 
		window.onload = function(){
			//******
		}; 
<!-- 像input自结束标签,***.innerHTML没有用,他如果有name属性,可以**.name -->
		<!-- 如果需要读取元素节点属性,直接使用元素.属性名
		例子:元素.id元素.name元素.value注意:class属性不能采用这种方式,
		读取class属性时需要使用元素.className
 -->

像input自结束标签,*.innerHTML没有用,他如果有name属性,可以.name -->
<!-- 如果需要读取元素节点属性,直接使用元素.属性名
例子:元素.id元素.name元素.value注意:class属性不能采用这种方式,
读取class属性时需要使用元素.className

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值