JS_Dom对象

1.DOM对象-01

  • 获取DOM元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script>
    		<!-- 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 -->
    		<!-- dom元素和node(节点)的区别 -->
    		<!-- 
    			dom元素指的是页面的标签,通过任意一个dom元素的关系可以找到当前页面其他任意的一个dom元素;
    			node节点指的是页面的任意元素(页面的每个东西都是节点),
    				标签 换行符 注释 空格  属性 标签内容等都可以被当做node节点
    		
    			既然是节点,也是可以被js选中的 
    		-->
    		<!-- js可以操作dom元素,包括dom元素的属性和内容 -->
                        
    		// 当文档/页面加载完毕后才会执行onload函数
    		window.onload = function(){
    			// 1.id选择  极特殊的情况
    			var p1 = document.getElementById('p1');
    			console.log(p1);
    			// 2.通过标签名选中  极少,因为重复的标签很多!!
    			var h2 = document.getElementsByTagName('h2');
    			console.log(h2);  // 数组类型
    			console.log(h2[0]); 
    			//遍历获取每一个h2
    			for (var i = 0; i < h2.length; i++) {
    				console.log(h2[i]) ;
    			}
    			//3.通过class选中  最常用!! ie6,7,8不支持! 而且ie8不支持console.log()
    			// 注意 : getElementsByClassName()函数的返回值是一个数组
    			var a = document.getElementsByClassName('a1');	
    			console.log(a); // 数组
    			console.log(a[0]); 
    			
    			//4.通过标签的name属性来获取的对象集合
    			var li = document.getElementsByName('hobbys') ;
    			console.log(li) ;
    		}
    		
    	</script>	
    </head>
    <body>
    	<!-- 任何一个标签都有class 属性 和id属性 ; 一般class用于设置样式,而id一般用于js选择 -->
    	<p id="p1">今天好冷啊!</p>
    	<h2>今天天气不错111</h2>
    	<h2>今天天气不错啊22222</h2>
    	<a class="a1">MSR学院</a>
    	<a class="a1">MSR学院</a>
    	
    	<input type="checkbox" name="hobbys" id="" value="" />
    	<input type="checkbox" name="hobbys" id="" value="" />
    	<input type="checkbox" name="hobbys" id="" value="" />
    	<input type="checkbox" name="hobbys" id="" value="" />
    	
    </body>
    
    </html>
    
  • 获取父类节点

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.box{
    			width: 400px;
    			height: 400px;
    			background-color: pink;
    			/* background-image: url(''); */
    		}
    		.box .innerBox{
    			width: 200px;
    			height: 200px;
    			background-color:green;
    			background-size: 100%;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		文字
    		<div class="innerBox">
    			
    		</div>
    	</div>
    	<button class="btn" onclick="change('我喜欢编程')">恢复</button>
    
    	<script>
    		// 添加事件的两种方式
    		
    		// 通过下标获取第一个元素
    		var innerBox = document.getElementsByClassName('innerBox')[0];
    		console.log(innerBox);
    		// api:  dom.parentNode  ==> 通过dom对象获取该dom的父类节点.
    		var pNode = innerBox.parentNode;
    		console.log(pNode);
    		var btn = document.getElementsByClassName('btn')[0];
    		// background-color 这种形式是不能做为变量或者key的  ----->   backgroundColor
    		//注意: 在js中操作css中的属性,一般会把abc-xx转换为abcXx 小驼峰命名法
    		
    		// 事件 : 点击绿色盒子 使外层盒子变红
    		// 事件的三要素 1.谁(事件对象)  2.什么事件(操作:点击?聚焦?离焦?等)  3.怎么处理(效果怎么展示)
    		//方式1 : DOM对象的onclick属性
    		innerBox.onclick = function(){
    			pNode.style.backgroundColor = 'red';
    			pNode.style.fontSize = '35px';
    			pNode.style.backgroundImage = 'url(img/01.jpg)' ;
    			pNode.style.backgroundSize = '100% 100%' ;
    		}
    		//恢复颜色
    		// btn.onclick = function(){
    		// 	pNode.style.backgroundColor = 'pink';
    		// }
    		// 方式2 : 在标签中定义事件,事件触发函数
    		function change(num){
    			alert(num);
    			pNode.style.backgroundImage = 'none';
    			pNode.style.backgroundColor = 'pink';
    		}
    		
    	</script>
    </body>
    </html>
    

2.DOM对象-02

  • 获取兄弟节点

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<p>我是p1</p>
    	<p>我是p2</p>
    	<p class="p3">我是p3</p>
    	<!--下面是p4-->
    	<p>我是p4</p>
    	
    
    	<script>
    		var p3= document.getElementsByTagName('p')[2];
    		console.log(p3);
    
    		//nextSibling 下一个兄弟节点 回车换行都会被查找. 回车称为文本节点.
    		// 嫡出 : 正妻所生的儿子
    		var p4 = p3.nextSibling;
    		console.log('nextSibling = ') ;
    		console.log(p4) ;
    		console.log('nextSibling = ') ;
    		console.log(p4.innerText) ;
    		
    		// 庶出
    		var p4 = p3.nextElementSibling;
    		console.log('nextElementSibling = ') ;
    		console.log(p4) ;
    		console.log('nextElementSibling = ' + p4.innerText) ;
    
    		//兼容
    		var p4 = p3.nextElementSibling || p3.nextSibling;
    
    		console.log(p4);
    		p4.style.backgroundColor='red' ;
    		
    		/* 
    			nextSibling属性与nextElementSibling属性的差别: 
    			nextSibling属性返回元素节点之后的兄弟节点
    					(包括文本节点、注释节点即回车、换行、空格、文本等等); 
    			nextElementSibling属性只返回元素节点之后的兄弟元素节点
    					 (不包括文本节点、注释节点);
    			注意: 空格、回车也会看作文本,以文本节点对待。 
    		*/
    	</script>
    
    </body>
    </html>
    
  • 获取孩子节点

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<div id="box" class="box">
    		<p>我是p1</p>
    		<p>我是p2</p>
    		<!-- 我是p3 -->
    		<p>我是p3</p>
    		<p>我是p4</p>
    	</div>
    
    	<script>
    		var box = document.getElementById('box');
    		//firstChild 找到第一个孩子节点,包括回车空格等文本在内.
    		var p1 = box.firstChild;
    		console.log(p1) ;
    		var p1 = box.firstElementChild;
    		console.log(p1) ;
    		//兼容写法
    		var p1 = box.firstElementChild || box.firstChild;
    		p1.style.backgroundColor = 'red';
    		// childNodes 属性返回所有的节点,包括文本节点、注释节点;
    		// children 属性只返回元素节点;
    		var ps = box.children;
    		console.log('children : ') ;
    		console.log(ps) ;
    		
    		var ps = box.childNodes;
    		console.log('childNodes : ') ;
    		console.log(ps) ;
    		
    		for(var i = 0 ; i < ps.length ; i ++){
    			console.log(ps[i]);
    			// 每个标签有一个 nodeType的属性 用于标明 当前标签的类型.
    			//  nodeType  ==  1  表示的是元素节点   记住   元素就是标签
    		    //  nodeType  ==  3  是文本节点   了解
    			// nodeType = 8   注释  了解
    			document.write(ps[i].nodeType)
    			document.write('<br>')
    		}
    	</script>
    </body>
    </html>
    
  • 创建节点

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<div class="box">
    		<p class="p1">我是p1标签</p>
    	</div>
    	<script>
    		var boxEle = document.getElementsByClassName('box')[0];
    		//内存中创建标签
    		var pEle = document.createElement('p');
    		//给标签内容
    		pEle.innerHTML='勤能补拙是良训,一份辛劳一分才!' ;
    		//插入节点   父节点.appendChild();
    		boxEle.appendChild(pEle);
    		
    		// 父节点.insertBefore(要插入的节点,参考节点);
    		var img = document.createElement('img');
    		img.src = 'img/wx.jpg';
    		// img.width = '200' ;
    		// img.height = '300' ;
    		img.style.width = '200px' ;
    		img.style.height = '300px' ;
    		img.alt = '飞了' ;
    		boxEle.insertBefore(img, pEle);
    	</script>
    </body>
    </html>
    
  • 设置节点属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.danger{
    			color: red;
    		}
    	</style>
    </head>
    <body>
    	<h1>Js 操作标签的属性</h1>
    	<p class="p1 danger" title="再看我就把你喝掉">我是一个p标签</p>
    	<button>瞅你咋地!</button>
    	<script>
    		// 重点  Attribute
    		var pEle = document.getElementsByClassName('p1')[0];
    		var btn = document.getElementsByTagName('button')[0];
    		// 获取:getAttribute(名称)
    		// 设置:setAttribute(名称, 值)
    		// 删除:removeAttribute(名称)
    
    		//添加属性 但是只能添加具有的属性
    		console.log('getAttribute : ' + pEle.getAttribute('title')) ;
    		pEle.setAttribute('title','你愁啥!');
    		console.log('getAttribute : ' + pEle.getAttribute('title')) ;
    		pEle.setAttribute('id', 'p1');
    		console.log('getAttribute id : ' + pEle.getAttribute('id')) ;
    		// pEle.setAttribute('zhangsan', 'p1');
    
    		//添加点击事件
    		pEle.onclick = function(){
    			// 获取属性
    			var clazz = this.getAttribute('title');
    			console.log(clazz);
    			
    			pEle.setAttribute('class','');
    		}
    		//当btn被点击的时候 去掉p标签的title属性
    		btn.onclick = function(){
    			pEle.removeAttribute('title');
    			pEle.setAttribute('class','danger');
    		}
    	</script>
    </body>
    </html>
    
posted @ 2024-01-18 08:39  张心野  阅读(20)  评论(0)    收藏  举报