JavaScript学习笔记(第七章—DOM（2）)

最新推荐文章于 2024-08-22 10:43:59 发布

王欣欣0328

最新推荐文章于 2024-08-22 10:43:59 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/qq_45585500/article/details/102504355

版权

JavaScript学习笔记(第七章—DOM（2）)

7.2.5元素样式

对于元素对象的样式，还可以直接通过“style.属性名称”的方式操作。在操作样式名称时，需要去掉CSS样式名中的横线“-”，并将第二个首英文字母大写。

<div id="box"></div>
		<script>
			var box=document.getElementById('box');
			box.style.width='100px';
			box.style.height='100px';
			box.style.backgroundColor='red';
			box.style.transform='rotate(7deg)';		//transform向元素应用2D或3D转换
		</script>

此处代码用于为获取的box元素对象添加样式，效果相当于在CSS中添加样式：

#box{width: 100px;height: 100px;background-color: red; 
		transform: rotate(7deg);}

classList（只读）可以操作元素的类选择器列表，也可以利用元素对象的className属性获取，结果为字符型。

		<style>
			.bg{background: #ccc;}
			.strong{font-size: 24px; color: red;}
			.smooth{height: 30px;width: 120px;border-radius: 10px;}
		</style>
	</head>
	<body>
		<ul>
			<li>PHP</li>
			<li class="bg">JavaScript</li>
			<li>C++</li>
			<li>Java</li>
		</ul>
		<!-- 修改第二个li的类名 -->
		<script>		
			//获取第二个li元素
			var ele=document.getElementsByTagName('li')[1];
			//若第二个li元素没有strong类,则添加.
			if(!ele.classList.contains('strong')){
				ele.classList.add('strong');
			}//若li元素中没有smooth类则添加,有则删除
			ele.classList.toggle('smooth');
			console.log('添加与切换样式后:');
			console.log(ele);
			//删除样式
			ele.classList.remove('bg');
			console.log('删除后');
			console.log(ele);
		</script>

7.3.1节点操作

1、获取节点

HTML文档可以看作是一个节点树，因此可以利用操作节点的方法操作HTML中的元素
节点的查看获取

<ul id="ul">
			<li>JS</li>
			<li>BOM</li>
			<li>DOM</li>
			<!-- 注释 -->
		</ul>
		<script>
			var ul=document.getElementById('ul');
			 console.log(ul.childNodes);		//查看ul下面的所有节点
		</script>

控制台显示的结果中0、2、4、6、8都是文本节点，即<ul>元素中每个标签前后的空白和换行符，1、3、5是元素节点，7是注释节点。

节点追加

获取元素的节点以后，还可以利用DOM提供的方法实现节点的添加，如创建一个li元素节点，为li元素节点创建一个文本节点。

      <script>
			var h2=document.createElement('h2');	//创建h2元素节点
			var text=document.createTextNode('Hello JavaScript');//创建文本节点
			var attr=document.createAttribute('align');		//创建属性节点
			attr.value='center';		//为属性节点赋值
			h2.setAttributeNode(attr);	//为h2元素添加属性节点
			h2.appendChild(text);		//为h2元素添加文本节点
			document.body.appendChild(h2);	//将h2节点追加为body元素的子节点			
		</script>

节点删除

开发中若要删除某个HTML元素节点或属性节点，则可以利用removeChild()和removeAtrtibuteNode()方法实现，返回值是被移除的元素节点或属性节点。

		<ul>
			<li>PHP</li>
			<li>JavaScript</li>
			<li class="strong">UI</li>
		</ul>
		<script>
			var child=document.getElementsByTagName('li')[2];	//获取第三个li元素
			var attr=child.getAttributeNode('class');			//获取元素的class属性值
			console.log(child.removeAttributeNode(attr));		//删除元素的class属性值
			console.log(child.parentNode.removeChild(child));	//删除元素
		</script>