javascript基础——var和let区别、DOM对象、document对象的常用方法、var和let区别、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点、删除和替换节点

DOM：文档对象模型（Document Object Model），通过DOM可以动态改变文档内容

document对象的常用方法

getElementById()	元素的ID名称来访问， 返回对拥有指定id的第一个对象的引用
getElementsByName()	按元素的name名称来访问， 返回带有指定名称的对象的集合
getElementsByTagName()	按标签来访问， 返回带有指定标签名的对象的集合
querySelector()	指定选择器的第一个元素
querySelectorAll()	指定选择器的所有元素
getElementsByClassName()	通过类名获取元素集合

var和let区别

1.作用域不一样：
通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。

2.变量提升：
浏览器在运行代码之前会进行预解析，首先解析函数声明，定义变量，解析完之后再对函数、变量进行运行、赋值等。 不论var声明的变量处于当前作用域的第几行，都会提升到作用域的头部。 var 声明的变量会被提升到作用域的顶部并初始化为undefined，而let声明的变量在作用域的顶部未被初始化。let不能在定义之前访问变量，但是var可以。

3.块级作用域：
只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。而且，在代码块内，使用let命令声明变量之前，该变量都是不可用的，尽管代码块外也存在相同全局变量。

4. let不允许在相同作用域内，重复声明同一个变量，但是var可以。

节点

• 元素节点：标签
• 属性节点：属性
• 文本节点：文本

查找结点 

 通过父节点对象查找子节点对象

     父节点对象.firstChild      获取当前元素的第一个子节点

     父节点对象.lastChild      获取当前元素的最后一个子节点

     父节点对象.childNodes  获取当前元素的所有子节点 可能会有空格

     父节点对象.firstElementChild 查找父节点下的第一个子元素节点

     父节点对象.lastElementChild 查找父节点下的最后一个子元素节点

     父节点对象.children：获取当前元素的所有子元素

通过子节点对象查找父节点对象

     子节点对象.parentElement    通过子节点查找父元素

     子节点对象.parentNode         获取当前元素的父元素

通过子节点查找兄弟节点

      子节点对象.previousSibling   获取当前元素的前一个兄弟节点

      子节点对象.nextSibling           获取当前元素的后一个兄弟节点

      子节点对象.previousElementSibling   获取当前元素的前一个兄弟节点

      子节点对象.nextElementSibling           获取当前元素的后一个兄弟节点

 查看/修改/删除属性节点

查看属性节点：getAttribute("属性名")

修改属性节点：setAttribute("属性名","属性值")

删除属性节点：removeAttribute(“属性名”)

创建和增加节点  

createElement（）：创建元素节点：

appendChild（）：末尾追加方式插入节点

insertBefore（）：在指定节点前插入新节点

cloneNode（）：克隆节点

删除和替换节点 

removeChild ( ) ：删除节点 

replaceChild ( ) ：替换节点