JavaScript从入门到放弃（六）

DOM简介

• 节点：Node——构成HTML文档最基本的单元
  
  • 常用节点分为四类

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

• 浏览器已经为我们提供文档节点对象这个对象时window属性可以在页面中直接使用，文档节点代表的是整个网页。
• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
• JavaScript与HTML之间的交互式通过事件实现的。
• 对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

<button id="btn">点我一下</button>
//获取到button对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHTML = "I am Button";
//绑定处理函数来响应事件
btn.onclick = function(){
    alert("Hello");
};

• 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载。会导致无法获取到DOM对象。

//onload事件会在整个页面加载完成之后才触发
//为window绑定一个onload事件
window.onload = function(){
    alert("hello");
};

• 获取元素节点
  
  • 通过document对象调用

1、getElementById()：通过id属性获取一个元素节点对象
2、getElementsByTagName()：通过标签名获取一组元素节点对象
3、getElementsByName()：通过name属性获取一组元素节点对象

//innerHTML用于获取元素内部的HTML代码的，对于自结束标签，这个属性没有意义，如果需要读取元素节点属性，直接使用元素.属性名，例子：元素.id 元素.name 元素.value 注意class属性不能采用这种方式。读取class属性时需要使用元素.className。
//要修改一个元素的属性   元素.属性 = 属性值。

• 获取元素节点的子节点

通过具体的元素节点调用
1、getElementsByTagName()，返回当前节点的指定标签名后代节点
2、childNodes，表示当前节点的所有子节点
3、firstChild，表示当前节点的第一个子节点
4、lastChild，表示当前节点的最后一个子节点

• 获取父节点和兄弟节点

通过具体的节点调用
1、parentNode，表示当前节点的父节点
2、previousSibling，表示当前节点的前一个兄弟节点
3、nextSibling，表示当前节点的后一个兄弟节点

• DOM增删改查

1、增加一个节点
//创建广州节点<li>广州</li>
    //创建li元素节点
    document.createElement()，需要一个标签名作为参数，并将创建好的对象作为返回值返回
    //创建文本节点
    document.createTextNode()，需要一个文本作为参数，并将创建好的节点作为返回值返回
    //appendChild()，向一个父节点中添加一个新的子节点，用法：父节点.appendChild(子节点);
//将广州添加到city下
//insertBefore,可以在指定的子节点前插入新的子节点,用法：父节点.insertBefore(新节点，旧节点);

insertBefore();在指定的子节点前面插入新的子节点
replaceChild();可以使用指定的子节点，语法：父节点.relaceChild(新节点，旧节点);
removeChild();可以删除一个子节点，语法：父节点.removeChild(子节点);

for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行