文集上篇: JavaScript入门学习之旅(一)——JavaScript变量提升和函数提升

体验了几天断网的生活(其实是因为家里宽带故障数天之久,仍未修好),就把图书馆借来却一直没有看的《JavaScript DOM 编程艺术》给刷了一遍,整理了些学习笔记。

DOM节点

节点类型

DOM节点总共有三种类型:

  • 元素节点:HTML文件中所有元素,如p标签,ul标签。
  • 文本节点:元素节点中的文本内容,如p标签中的hello world。
  • 属性节点:标签中的属性key和value对,如img标签的src属性。

获取元素节点

通过DOM获取元素节点通常用3种DOM方法:

//获取ID为divFirst的元素节点对象

var divFirst =document.getElementById('divFirst');

//获取class为message的所有元素节点对象数组

var message = document.getElementsByClassName('message');

//通过getElementsByClassName获取的元素节点通常为值组成的数组集合,可以通过length获取数组长度
var messageLength = message.length;
//遍历所有class为message的元素节点
for(let i = 0; i < messageLength - 1;i++){
  document.write(message[i]);
}

//获取所有li标签的元素节点对象数组
var li = document.getElementsByTagName('li');
//通过getElementsByTagName获取的元素节点通常为值组成的数组集合,可以通过length获取数组长度
var liLength = li.length;
//遍历所有li的元素节点
for(let i = 0; i < liLength - 1;i++){
  document.write(li[i]);
}

而新DOM标准效仿jQuery,依照CSS选择器提供了一套新的DOM获取元素节点的方法,它能做到的不仅仅是获取id,class以及元素标签,还能以各种CSS选择器的形式进行元素筛选的选取。

//获取ID为divFirst的元素节点对象
var divFirst = document.querySelector('#divFirst');
//获取Class为message的首个元素节点对象
var message = document.querySelector('.message');
//获取li标签的首个元素节点对象
var li = document.querySelector('li');

//获取class为message的所有元素节点对象数组
var message = document.querySelectorAll('.message');
var messageLength = message.length;
for(let i = 0; i < messageLength - 1;i++){
  document.write(message[i]);
}
//获取所有li标签的元素节点对象数组
var li = document.querySelectorAll('li');
var liLength = li.length;
for(let i = 0; i < liLength - 1;i++){
  document.write(li[i]);
}

//还能依照其它CSS选择器进行元素节点的获取

获取和修改属性节点

//获取id为message的title属性值
var messageTitle  = document.querySelector('#message').getAttribute('title');
//如果title存在,则返回title的文本值,如果不存在,则返回null
document.write(messageTitle);

//修改或设置id为message的title属性值
var messageTitle  = document.querySelector('#message').setAttribute('title','This is a message');
//如果title存在,则修改title的文本值,如果不存在,则创建并设置title的文本值
document.write(messageTitle);
```
# 获取所有子节点
在一颗滑稽树(不对~节点树)上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素所有子元素的数组:
```javascript
//选取body元素下所有子节点
var body_element = document.getElementsByTagName("body")[0].childNodes;
//获取数组长度
var body_element_length = body_element.length;
//打印数组长度
alert(body_element_length);

获取单个类型的所有子节点

通过childNodes属性获取到的节点子元素个数极为庞大,其实是因为文档的节点类型并非只有元素节点,它还包括一开始说到的属性节点和文本节点。 - 元素节点的nodeType属性值是1 - 属性节点的nodeType属性值是2 - 文本节点的nodeType属性值是3 通过这个规则,获取body元素内所有元素节点的方式可以这样做:

//选取body元素的所有子节点
var body_element = document.getElementsByTagName("body")[0].childNodes;
//获取数组长度
var body_element_length = body_element.length;
//获取单个类型的所有子节点
for(let i = 0; i < body_element.length;i++){
    if(body_element.nodeType == 1){
        document.write(body_element[i]);
    }
}

查看/修改文本节点属性值

假设有一个id为hello的p标签,含有文本hello world,利用nodeValue属性,能够获取或修改该标签的文本。

var pElement = document.querySelector('#hello').nodeValue;
//查看该文本节点的值
document.write(pElement);

firstCHild和lastChild属性

firstChild和lastChild分别代表childNodes的首个节点和末尾节点,可说是childNodes的语义化属性。

//firstChild等同于node.childNodes[0]
var body_element = document.getElementsByTagName("body")[0].childNodes[0];
var body_element_firstChild = document.getElementsByTagName("body")[0].firstChild;
//lastCHild等同于node.childNodes[node.childNodes.length-1]
var body_element = document.getElementsByTagName("body")[0].childNodes[body_element.length-1];
var body_element_firstChild = document.getElementsByTagName("body")[0].lastChild;

平稳退化

平稳退化的概念是在访问者访问不支持JavaScript的浏览器,仍然能过正常顺利地浏览你网站的基本功能。在2017年,前端离不开javascript的今天,可能听起来很荒谬,不过,无论是对特殊设备的访问者还是蜘蛛爬虫而言,平稳退化都不是一个过时的概念。

渐进增强

所谓渐进增强,就是用一些额外的信息层去包裹原始数据,按照“渐进增强”的原则创建的网页,几乎都符合“平稳退化原则”,简而言之,就是尽可能去语义化文本标签。