《JavaScriptDOM编程艺术》读后感1：初次接触JavaScriptDOM的感觉

《JavaScriptDOM编程艺术》读后感1：初次接触JavaScriptDOM的感觉

 2016-05-22 15:30    网页设计   标签：DOM   930    发表评论

虽然我做了很久的web，也多多少少接触到JavaScript。但真正坐下来静下心来学习这门语言还是很少。

昨晚，我饶有兴趣的按书上说的，对JavaScriptDom中的五个基本方法做了点尝试，发现自己对基础的东西还是有欠缺的。对于这些，自我归纳总结下：

三个getElement：

getElementById，getElementByTagName，getElementByClassName：这三个都是基本语法：获取ID，获取Tag，获取className。它们可以说的一个“动作”，所以出现的时候往往是使用document这个方式开实现的。

var x = document.getElementById(id);
var xx = document.getElementByTagName(tag);
var xx = document.getElementByClassName(class);

byId获取的是属性ID对应的元素，由于一般在web设计时ID的唯一性，所以byId常常获取的是一个单元素。而ByTagName和ByClassName常常对应的是多个<p><li>和class。所以它们常常获取的是一个数组。

tagName是指web的元素架构，比如说div,p,li等。这就像人体的各个器官，它们共同组成了web这一个体，并且在里面分别担负着不同功能：有一些是负责文字段落的（<p>），有一些是负责框体架构的(<div>)，还有一些新的是负责声音的(<video>)，负责抬头的（<header>）和负责底部的(<footer>)。这些都是JavaScriptDom所说的元素架构。

获取和设置属性：

我们刚才说道获取了元素，那么元素属性是个什么玩意呢？

<p title="titleName" id="id">这不是属性值</p>
<script type="text/javascript">
	// 方法一
	var test=document.getElementsByTagName("p");
	alert(test[0].getAttribute("title"));// 输出：titleName
	// 方法二
	var test1=document.getElementById("id");
	alert(test1.getAttribute("title"));// 输出：titleName
</script>

上面是一个简单的web代码，其中使用了一个p元素，给这个P元素上附了一个title属性。这个title的属性值就是“titleName”。我用了两个不同的方法来调用。

首先，我们来说ByTagName，这里哪怕它只有一个p元素。获取的信息都是以数组array的形式保存的，所以，我们要调用时必须要告诉系统是第几个（[0]）；而ById是特定属性，它是单一的，所以，test1就是一个单独的object。

然后我们说下getAttribute()，它是获取是属性值。这里有人会认为，我们调用的是P，属性值是不是就是P里面那段文字呢。这里我认为P是elements节点，而p里面的title才是元素，我输出只能输出里面对应的titleName这个值，如果想输出P字段里面的值应该用另外一种方式：innerText。

获取了属性，我们也可以通过简单的方式来改变这个属性，就像这样：

<p title="titleName" id="id">这不是属性</p>
<script type="text/javascript">
	var test1=document.getElementById("id");
	alert(test1.getAttribute("title"));// 输出：titleName
	test1.setAttribute("title","changeName");
	alert(test1.getAttribute("title"));// 输出：changeName
</script>

简单说来，就是我们把p里面的title的元素的值修改成了changeName。

这两个方法的对应方式应该是这样：

object.getAttribute(attribute);
obiect.setAttribute(attribute,value);

说到这里，我感觉思路有点明白了。可以通过这些衍生出各种东西，比如，改变图片的url值来改变其显示的图片，改变其class值来改变其模式等。这些动作都是依靠这些最基本的来操作的。

推荐工具：

如果您使用的是sublime text编辑器，并且已经厌倦了半天输入一个行代码的话，那么我们推荐一个比较不错的javacript插件来解放你的思维。准确的说应该是一个javacript的snippets，它全名以前应该叫做javascript-snippets，现在叫做javascript&nodejs-snippets。大家可以通过它的github地址来看下具体的操作：

地址是：https://github.com/zenorocha/atom-javascript-snippets；

当然。你也可以看视频了解下它是如何运用的：http://www.imooc.com/video/5467

《JavaScriptDOM编程艺术》读后感：

1. 初次接触JavaScriptDOM的感觉
2. 第六章，一个常规事件的逻辑
3. 3个方法来改变DOM结构树
4. 在元素前后插入元素
5. 培养function的逻辑思维
6. 细说下getNextElement函数
7. 动画方法moveElement()
8. 实战中的global.js
9. 整站练习(附源文件)