script笔记4-DOT

最新推荐文章于 2024-07-23 22:43:52 发布

古征

最新推荐文章于 2024-07-23 22:43:52 发布

阅读量151

点赞数

分类专栏： java servlet 文章标签： css DOM

本文链接：https://blog.csdn.net/zhensanguo521/article/details/80081318

版权

java servlet 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.获取页面元素

	<style>
		#div1{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>

<body>
		<div id="div1" class="div1">
			
		</div>
		<div class="div2">
			
		</div>
		<input name="input1" />
	</body>
	<script>
		// 获取元素
		var el1 = document.getElementById('div1');//通过ID获取元素
		var el2 = document.getElementsByName('input1');//通过name获取元素，返回为数组
		var el3 = document.getElementsByClassName('div2');//通过类名获取元素，返回为数组
		var el4 = document.getElementsByTagName('div');//通过标签名获取元素，返回为数组
		console.log(el1);
		console.log(el2);
		console.log(el3);
		console.log(el4);
	</script>

运行结果如下

2.获取元素的属性

	<body>
		<p id="p1">哈哈哈</p>
		<p id="p2"><b>哈哈哈</b></p>
		<input id="login" type="button" value="登录" />
	</body>
	<script>
		var el1 = document.getElementById('p1');
		var el2 = document.getElementById('p2');
		console.log(el1.innerHTML);
		console.log(el1.innerText);
		console.log(el2.innerHTML);
		console.log(el2.innerText);
		
	</script>

运行结果如下：

`3.获取元素属性并赋值`

<body>
		<input id="login" type="button" value="登录" />
		<input id="input1" type="text"/>
	</body>
	<script>
		var el1 = document.getElementById('login');
		console.log(el1.value);
		console.log(el1.type);
		
		var el2 = document.getElementById('input1');
		el2.value="哈哈哈";
		
	</script>

4.获取节点属性并赋值

<body>
		<p id="p1">哈哈哈</p>
		<input type="text" value="哈哈哈" id="in1"/>
	</body>
	<script>
		//元素节点
		var el1 = document.getElementById('p1');
		console.log(el1.nodeType);
		console.log(el1.nodeName);
		console.log(el1.nodeValue);
		var in1 = document.getElementById('in1')
		console.log(in1.nodeType);
		console.log(in1.nodeName);
		console.log(in1.nodeValue);
		
		//属性节点/
		var el2 = el1.getAttributeNode('id');
		//var in2 = in1.getAttributeNode("type")
		console.log(el2.nodeType);
		console.log(el2.nodeName);
		console.log(el2.nodeValue);
		//文本节点
		var el3 = el1.childNodes[0];
		console.log(el3.nodeType);
		console.log(el3.nodeName);
		console.log(el3.nodeValue);
		
		
	</script>

结果是

nodeType指的是节点类型，即元素类型表示为1，属性类型表示为2，文本类型表示为3.

5.元素节点的关系及获取

body代码如下

<body>
		<div>
			<table id="table">
				<tr id="tr1">
					<td>学号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
				</tr>
				<tr>
					<td>10001</td>
					<td>张三1</td>
					<td>男</td>
					<td>22</td>
				</tr>
				<tr>
					<td>10002</td>
					<td>张三2</td>
					<td>女</td>
					<td>21</td>
				</tr>
				<tr>
					<td>10003</td>
					<td>张三3</td>
					<td>男</td>
					<td>19</td>
				</tr>
				
			</table>
		</div>
	</body>

<script>
		var table = document.getElementById('table');
		var el1 = document.getElementById('tr1');
		//父节点
		console.log(table.parentNode);
		//子节点
		console.log(table.childNodes);//不常用
		console.log(table.children);
		/*
		 * javascript中childNodes与children的区别
		   1、childNodes：获取节点，不同浏览器表现不同；
		      IE：只获取元素节点；
		            非IE：获取元素节点与文本节点；
		            解决方案：if(childNode.nodeName=="#text") continue 
		            或者 if(childNode.nodeType != '3') continue
		   2、children：获取元素节点，浏览器表现相同。
		            因此建议使用children。
		   3、firstChild与firstElementChild
		            相同点：获取父节点下的第一个节点对象；
		            不同点：1、firstchild：IE6,7,8：第一个元素节点；
			　　　　　　　　非IE6,7,8：第一个节点，文本节点或者元素节点；
			　　　　　2、firstElementChild：IE6,7,8：不支持；
			　　　　　　　　非IE6,7,8：第一个元素节点；
		 */
		//兄弟节点
		var el2 = el1.nextSibling;//下一个同级对象		
		console.log(el2)//
		console.log(el2.nextSibling);//下一个
		//console.log(el1.nextSibling.nextSibling);//下一个
		console.log(el1.previousSibling);//上一个
		console.log(el1.nextElementSibling);//下一个（常用）
		 var arr = document.getElementsByTagName("tr");
		 for(var i=0;i<arr.length;i++){
	    		//var a = arr[i].style;//
	    	arr[i].onmouseover = function (){
      		this.style.backgroundColor="red"
     	 }
	    	arr[i].onmouseout = function (){
      		this.style.backgroundColor="white"
     	 }
	    }
	</script>

常用.nextElementSibling来选择下一个同级对象。

6.通过JS获取CSS或修改CSS.html

<style>
		.test{
			border: #333333 2px solid;
			width: 100px;
			height: 100px;
		}
	</style>
	<body>
		<div id="div1" class="test" style=" background-color: #FF0000; "></div>
	</body>
	<script>
		var el1 = document.getElementById('div1');
		//获取className
		console.log(el1.className);
		//获取style对象
		var a = el1.style;
		console.log(a);
		console.log(typeof a);
		
		//获取样式(只和行内式交互，和内嵌和外链无关)
		console.log(a.width);//这个是获取不到的，除非写到行内(内联)
		console.log(a.backgroundColor);//这样就可以获取到了，注意命名规则
		console.log(a.cssText);//获取行内的所有样式
		
		//光标放上去修改背景颜色和s宽度
		el1.onmouseover =function (){
			a.width="300px";
			a.background="#00FF00";
		}
	//
		el1.onmouseout =function (){
			a.width="200px";
			a.background="#0000ff";
			
		}
	</script>

控制台内容：

古征

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
script笔记4-DOT

1.获取页面元素 &lt;style&gt; #div1{ width: 100px; height: 100px; background-color: red; } .div2{ width: 100px; height: 100px; background-color: red; } &lt;/style&gt;&lt;body&gt; ...
复制链接

扫一扫

专栏目录