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

 2016-05-22 15:30

虽然我做了很久的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. 整站练习(附源文件)
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: