HTML-DOM基础

document

DOM全称是Document Object Model文档对象模型
就是把文档中的标签，属性，文本，转换成为对象来管理

• DOM
  • html DOM（重点）
  • css DOM
  • xml DOM

当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObject Model）

• document 它管理了所有的 HTML文档内容
• document它是一种树结构的文档
• 有层级关系 在dom中把所有的标签 都 对象化 （得到这个html标签的<--->对象-->操作）
• 通过document可以访问所有的标签对象

doucment对象方法一览

function addImg() {
    //添加小猫 
    // 在浏览器内存中 创建 
    var img = document.createElement("img"); 
    img.src = '1.png'; 
    img.height = '100'; 
    //添加到 body 标签 
    document.body.appendChild(img); 
} 

HTML DOM 节点

基本介绍

• 文档本身是文档节点

• 所有HTML元素是元素节点

• 所有HTML属性是属性节点

• HTML元素内的文本是文本节点*

• 注释是注释节点

常用方法与属性

• 属性

  • childNodes属性，获取当前节点的所有子节点 （注意文档如果有换行符，这个属性遍历的时候也会认为换行符也是一个子节点，HtmlSelectElement等 => 本身就有集合特点可以直接遍历不需要再去拿孩子节点来避免换行成为子节点）
  • firstChild 属性，获取当前节点的第一个子节点
  • lastChild 属性，获取当前节点的最后一个子节点
  • parentNode 属性，获取当前节点的父节点
  • nextSibling 属性，获取当前节点的下一个节点 (后一个)
  • previousSibling 属性，获取当前节点的上一个节点 (前一个)
  • className 用于获取或设置标签的 class 属性值
  • innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
  • innerText 属性，表示获取/设置起始标签和结束标签中的文本

• 方法

  • getElementById()通过id获取节点
  • getElementsByName()通过name获取NodeList
  • getElementsByTagName()通过元素标签名获取object HtmlCollection
  • appendChild( ChildNode )添加一个子节点

乌龟吃鸡案例（来源韩顺平老师）