jsDOMツリー

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
 -->

入力自己終了タグと同様に、* .innerHTMLは役に立ちません。name属性がある場合は、 .name->
<!-要素ノード属性を読み取る必要がある場合は、要素を直接使用できます。属性の
name :element.id element.name Element.value注:クラス属性はこの方法では使用できません
。クラス属性を読み取るときは、element.classNameを使用する必要があります。

おすすめ

転載: blog.csdn.net/weixin_44154094/article/details/112685782