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循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行