JavaScript系列教程(十三)：DOM(2)

四、样式表的属性

1、获取行间样式表的属性
语法：对象.style.属性名
对象.style["属性名"]

2、设置行间样式表的属性
语法：对象.style.属性名="属性值"

3、获取所有样式表的属性
IE: 对象.currentStyle["属性名"]
其他：window.getComputedStyle(对象，伪类)["属性名"]
注：个别浏览器对第二个伪类不支持，第二个参数可以写成null

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#first{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		
		<div class="div1" id="first">1</div>
		
		<script>
			var div1 = document.getElementById('first');
			
			//css脚本化
			//设置  成行间样式
			div1.style.color = 'red';
			div1.style.width = '200px';
			div1.style.height = '200px';
			div1.style.backgroundColor = 'blue';
			//backgroundColor 等价于 background-color的css属性
			//多个单词需要使用驼峰形式
			div1.style.borderRadius = '100px';
			//css属性有多个值
			div1.style.border = '20px solid green';
			
			//获取 行间样式
			console.log(div1.style.width);
			console.log(div1.style['width']);
			
			//不能获取内部样式/外部样式
			console.log(div1.style.fontSize);
			
			//封装方法, 解决js兼容性的时候，就是封装方法
			function getStyle(obj,attr){
				//IE
				if(obj.currentStyle){
					
					return obj.currentStyle[attr];
				//非IE
				}else{
					
					return window.getComputedStyle(obj,null)[attr];
				}
			}
			//获取指定元素的css属性的值
			var fs = getStyle(div1,'font-size');
			console.log(fs);
			
		</script>
	</body>
</html>

【注】getComputedStyle与style的区别
只读与可写getComputedStyle(ie下是currentStyle)方法是只读的，只能获取样式，不能设置；而element.style能读能写

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素

，getComputedStyle方法返回对象中length属性值（如果有），而element.style就是0。

五、DOM创建节点、插入节点、删除节点、替换节点

document.createElement() 创建一个元素节点
document.createTextNode()创建一个文本节点
父元素.appendChild(newChild) 将新节点添加到父节点的孩子列表的末端
父元素.insertBefore(newObj,节点）将新节点添加到父节点的某个子节点的前面
父元素.removeChild(obj)从父节点的子节点列表中删除制定的节点
父元素.replaceChild(newObj,OldObj)新节点替换旧节点
cloneNode()克隆节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="box">
			<p>p标签</p>
			<ul>
				<li>li标签</li>
				<li>li标签</li>
				<li>li标签</li>
			</ul>
		</div>
		
		<script>
			//1.获取节点常用的属性（元素、节点的属性）
			var div = document.getElementById('box');
			//childNodes 拿到所有的子节点
			console.log(div.childNodes);
			//parentNode 父节点（用的最多）
			console.log(div.parentNode);
			//previousSibling  前面的兄弟节点
			console.log(div.previousSibling);
			//nextSibling 后面的兄弟节点
			console.log(div.nextSibling);
			//firstChild 子节点第一个  lastChild子节点最后一个
			console.log(div.childNodes.firstChild);
			console.log(div.childNodes.lastChild);
			//有个地方需要注意：就是元素之间不能有空格、换行，否则会拿到文本节点text，
			//而text节点对我们并没有任何用处
			
			
			//2.创建、追加、删除、替换、插入节点
			//缺点就是会完全覆盖该节点下所有的内容
			//innerHTML 它并没有在DOM（W3C）规范里
			//优点：操作方便，速度快
			//div.innerHTML = "<h1>innerHTML</h1>";
			
			//创建新的元素
			var newNode = document.createElement('a');
			//创建文本节点
			var textNode = document.createTextNode('百度');
			
			//追加一个a标签，添加到最后
			div.appendChild(newNode);
			//在a标签里追加文本
			newNode.appendChild(textNode);
			
			//insertBefore 插入标签，在某个标签之前
			div.insertBefore(newNode,document.querySelector('p'));
			
			//removeChild删除某个标签，
			//只是把标签从DOM结构中删除掉了，并没有在内存中删除这个对象
			div.removeChild(newNode);
			
			//replaceChild 替换，新标签替换已有标签
			div.replaceChild(newNode,document.querySelector('p'))
			
			//克隆（复制）一个新节点
			var clone = div.cloneNode(true);//克 隆的是div
			div.appendChild(clone);
					
		</script>
	</body>
</html>

posted on 2017-08-02 16:16 阳光洒在代码上阅读(168) 评论(0) 收藏举报