JavaScript学习笔记（八）

一.DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

DOM可以做什么?

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量,如:

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

在 DOM 中，所有 HTML 元素都被定义为对象。属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。方法是您能够完成的动作（比如添加或删除 HTML 元素）。

查找 HTML 元素

通过ID查找:document.getElementById(id)

通过标签名查找:document.getElementsByTagName(name)

// 本例查找所有 <p> 元素：
var x = document.getElementsByTagName("p");

// 本例查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素：
var x = document.getElementById("main");
var y = x.getElementsByTagName("p"); 

通过标签name查找元素:document.getElementsByClassName(name)

通过CSS选择器查找元素: document.querySelectorAll()

// 返回class="intro"的所有<p>标签元素
var x = document.querySelectorAll("p.intro")

改变HTML元素

改变innerHTML : element.innerHTML = xxx

改变HTML元素属性值 : element.attribute = new value 或 element.setAttribute(属性名,值)

<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
// 修改了<img>元素的src属性值
</script>

</body>

改变HTML元素样式(style): element.style.property = new style

document.getElementById("p1").style.color = "blue";

创建删除添加元素

创建元素: document.createElement(element)

删除元素: document.removeChild(element)

添加元素: document.appendChild(element)

二.DOM事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

onfocus当输入字段获得焦点时改变其背景色。

三.DOM事件监听器

addEventListener() 方法可以为元素附加事件处理程序而不会覆盖已有的事件处理程序。

// 为myBtn元素添加click监听器
document.getElementById("myBtn").addEventListener("click",XXX);
// 注意事件名称要去掉on

能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

四.DOM节点

顶端节点被称为根（根节点）
同胞（兄弟或姐妹）指的是拥有相同父的节点。
术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。

访问 innerHTML 属性等同于访问首个子节点的 nodeValue,也可以这样访问第一个子节点.

var myTitle = document.getElementById("demo").firstChild.nodeValue;
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

获取body:

document.body

获取完整document:

document.documentElement

nodeName属性

nodeName属性规定节点的名称

nodeName 是只读的
元素节点的 nodeName 等同于标签名(大写)
属性节点的 nodeName 是属性名称

nodeValue属性

元素节点的nodeValue是undefined
文本节点的nodeValue是文本
属性节点的nodeValue是属性值

appendChild() 方法，追加新元素作为父的最后一个子。insertBefore() 方法放在第一个.

如需删除某个 HTML 元素，您需要知晓该元素的父,一种常见的解决方法：找到你想要删除的子，并利用其 parentNode 属性找到父

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换 HTML 元素,使用 replaceChild(新元素,旧元素) 方法.

getElementsByTagName() 方法返回 HTMLCollection 对象。,HTMLCollection 并非数组！

NodeList 对象与 HTMLCollection 对象几乎相同。NodeList 对象是从文档中提取的节点列表（集合）。如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection 。所有浏览器都会为 childNodes 属性返回 NodeList 对象。大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

NodeList 对象并非数组！

五.BOM

浏览器对象模型BOM（Browser Object Model）允许 JavaScript 与浏览器对话.

确定浏览器窗口的尺寸:

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口