使用FontAwesome图标与DOM操作教程,-优快云博客

学习复盘

Font Awesome 图标
vw vh em rem
DOM 元素 (节点 ) HTMLCollection 对象 NodeList 对象

Font Awesome 图标

要使用 Font Awesome 图标，请在 HTML 页面的 <head> 部分中添加以下行：

<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">

或者：

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

vw vh em rem

vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。

vw:1vw 等于视口宽度的1%
Vh:1vh 等于视口高度的1%
vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

(发现用这个，向左右推拉浏览器的窗口，我的盒子宽高可以等比例缩小，超级兴奋的疯狂改改改，结果整体缩小的时候，他不会小，避雷了)

em 是一个相对长度单位。其相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

1.em的值并不是固定的

2.em会继承父级元素的字体大小

rem全名root em，简写rem，故其也是一个相对长度单位，但只相对于根元素，可以简单的通过更改根元素大小，从而调整所有字体大小。

1.只相对于根元素（html）

2.通过修改根元素可成比例的调整页面字体大小

3.其适配方案通过js脚本设置像素点来实现

（rem暂时还不会用，等哪天再学一下）

DOM 元素 (节点)

appendChild() 方法，它用于添加新元素到尾部。

将新元素添加到开始位置，可以使用 insertBefore() 方法

replaceChild() 方法来替换 HTML DOM 中的元素

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象类似包含 HTML 元素的一个数组。

NodeList 对象

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似 HTMLCollection 对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM2</title>
	</head>
	<body>
		<div id="div1">
			<p id="p1">这是一个段落</p>
			<p id="p2">这是另一个段落</p>
		</div>
		<button id="btn" onclick="myp()">点我换颜色</button>
		<button id="btn1" onclick="myn()">点我换颜色</button>
		<p id="demo"></p>
		<p id="demo2"></p>
		<script>
			var para = document.createElement("p");
			var node = document.createTextNode("这是第一个新的段落")
			para.appendChild(node)
			var element = document.getElementById("div1")
			element.appendChild(para)
			var para2 = document.createElement("p");
			var node2 = document.createTextNode("这是第二个新的段落")
			para2.appendChild(node2)
			var child =document.getElementById("p1")
			var child2 =document.getElementById("p2")
			//将新元素添加到开始位置
			element.insertBefore(para2,child)
			//移除
			element.removeChild(child)
			//替换
			element.replaceChild(para,child2)
			/*HTMLCollection 对象*/
			var x = document.getElementsByTagName("p")
			document.getElementById("demo").innerHTML = x.length;
			function myp(){
			for(var i = 0;i<x.length;i++){
				x[i].style.backgroundColor="red";
			}			
			}
			
			
			/*NodeList 对象*/
			var myNodelist=document.querySelectorAll("p")
			document.getElementById("demo2").innerHTML = myNodelist.length;
			function myn(){
			for(var j = 0;j<myNodelist.length;j++){
				myNodelist[j].style.backgroundColor="blue";
			}			
			}
			
			
		</script>
		
	</body>
</html>