BOM和DOM

引言：dom(document object model)  bom(browser object model)

bom包括dom一下是结构图：

bom和dom结构图

DOM：

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

节点：

在 HTML DOM 中，所有事物都是节点；整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点。

节点的关系：

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。

例子：

head和body的父节点是html节点

文本节点 "Hello world!" 的父节点是p节点

head和body是同胞节点

关系图为：

DOM操作：

操作方法

Hello World!

    var  x=document.getElementById("intro");

      document.write(x.innerHTML+"haha");

DOM节点的属性：（注：不是属性节点）

innerHTML：获取元素内容的最简单方法是使用 innerHTML 属性。

x.innerHTML="new hehe"

nodeName :   属性规定节点的名称,nodeName 是只读的

console.log(x.nodeName)   //p

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue:  规定节点的值

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

nodeType:  返回节点的类型

nodeType

parentNode - 节点（元素）的父节点

childNodes - 节点（元素）的子节点

attributes - 节点（元素）的属性节点

dom操作的小例子：

  var  x=document.getElementById("intro");

   var body = document.getElementsByTagName("body")[0]; //body是x的父节点，如要删除x必须先找到其父节点

 x.onclick =function(){

          body.removeChild(x)

        //或者直接   x.parentNode.removeChild(x)

      }  //点击x则删除x节点

DOM事件：HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交 HTML 表单时

当用户触发按键时

事件的两种形式：

例子：

请点击该文本

例子：

document.getElementById("myBtn").onclick=function(){displayDate()};

onload 和 onunload 事件：

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。