首页 > 代码库 > 【读书札记】《JavaScript DOM编程指南》

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

2024-07-03 21:51:26   223人阅读

        对于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变量区分大小写（这不废话！），字符串声明单引号双引号都能表示。

如var name="yang"或var name=‘yang‘;

        2.JavaScript是弱类型语言，如可以这样声明变量

var name=‘yang‘ name = 1（没有特定的int和char的区分）;

        3.对数组的声明方式（我认为还是非常灵活），

如var number1 = Array(4);     var  number2 = Array();     var number3 = ("yang",11,true);

        4.关于”+“号操作符，它既可以表示数字之间的相加也可以表示字符之间的连接

如var number1= 7+5;     var number2 = "csdn"+"yang";

        5.JavaScript中创建对象和Java有着类似的地方。

 var yang = new Person; ——yang 是变量名，Person类名。

...........其实对Javascript的认识还是九牛一毛，希望以后能写出更好的Javascript代码。


        （转载本站文章请注明作者和出处 Coder的不平凡 ，请勿用于任何商业用途）


联系
我们