【读书札记】《JavaScript DOM编程指南》

浏览数：21 / 时间：2015年06月08日

对于Javascript的认识是来自于2011年夏天去实训基地做的一个网页项目，当时认为JavaScript是不是Java的一个派别语言什么的，老师那时候教我们调用了一些Javascript的方法。当时对这个语言的最初的印象就是会调用方法大致能懂就行了，没有深究。直到今年年初去面试几家企业，问我会不会使用Javascript，我说就调调几个方法就好了~ 当时瞬间就直到无地自容了。于是将这本JavaScript的电子书看了下，写下相关的读书札记，也希望能让和我有着对Javascript误解的人能够体会学习JavaScript的乐趣。

之所以这本书是JavaScript DOM 编程，必将和DOM扯上关系，DOM就是一个树形结构，很多文件都是这种类型，如xml文件，我们可以利用DOM，SAX解析。

下图展示了一个简单的html代码和树形结构模型：

之后我们就可以利用JS对相应的节点进行操作了，

如根据Id来拿取相应节点 var left = document.getElementById("left"); 以后进行验证就可以利用了。

除了对DOM进行良好的支持，我们还可以利用JS代码生成相应的html文档，这个功能可以有效的封装一些html区域。下面的代码例子就举例表明了JS动态添加html元素到html文档里面的作用，并进行相应的操作。（动态生成一个P标签加入到left的div布局下面）

<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				//创建一个P标签
				var para = document.createElement("p");
				//在P标签中加入文字
				var txt1 = document.createTextNode("csdn");
				var txt2 = document.createTextNode("yang");
				//把文字加入P标签里
				para.appendChild(txt1);
				para.appendChild(txt2);
				//根据Id拿到left定位
				var left = document.getElementById("left");
				//将P标签加入到left的布局下面
				left.appendChild(para);
			}
		</script>
	</head>
	<body>
		<div id="content">
			<div id="left">left
					<ul>
						<li>a</li>
						<li>b</li>
						<li>c</li>
					</ul>
			</div>
			<div id="right">right</div>
		</div>

	</body>
</html>

JS中还有很多方法如getElementsByTagName("div")，可以获取一个标签对象的集合。还有相关类，如Date，Array等，详细请查看javascript API

JS的强大还在于它还能与css进行交互。

<html>
	<head>
		<script language="javascript">
			window.onload=function(){
				var para = document.getElementById("example");
				alert("fontSize : "+para.style.fontSize);   //加载文本大小
			}
		</script>
	</head>
	<body>
		<p id="example" style="font:12px ‘Arial‘,sans-serif">aaa</p>
	</body>
</html>

以下是相关JavaScript相关细节（我主要是和Java语言做的一些区别）：

1.JavaScript变量区分大小写（这不废话！），字符串声明单引号双引号都能表示。