JS - 常用的HTML元素属性和操作方法（DOM元素操作）
虽然我们平时操作 DOM 元素时，常常会使用 jQuery 这样的 JS 封装库。但了解如何使用原生 JavaScript 对 DOM 进元素行操作也是很有必要的。
一、常用的 HTML 对象属性
通过 document.getElementById() 方法我们可以根据 id 查到对应的 HTML 对象，该对象有如下属性：
1，className
用于取得和设置 class 属性。
2，innerHTML
用于读取或者修改元素内部的 HTML 标记。
3，parentElement
保存着当前元素的父元素对应的 HTML 对象。
4，style
保存所有 CSS 属性，决定着相应 HTML 元素的外观。
style 属性会返回完整的样式对象，如果想要修改其中的样式，需要加上点（.）和要修改的样式属性名字。
myElement.style.fontSize = "12px";
5，tagName
保存当前对象的 HTML 元素的标签名，不带尖括号。
比如：当前对象如果表示一个 <img> 元素，那么个这个属性会返回文本“img”。
二、常用的 HTML 对象方法
1，hasAttribute()
判断对象是否有某属性，返回一个 Boolean 值。
2，getAttribute() 和 setAttribute()
这两个方法分别进行获取和修改对象属性。
myElement.getAttribute("href");
myElement.setAttribute("href", "http://hangge.com");
3，appendChild()
向目标节点的子节点列表的末尾添加新的子节点。
//插入后，newChild将成为myElement里最后一个子节点 myElement.appendChild(newChild);
4，insertBefore() 和 insertAfter()
（1）下面表示 newChild 作为 target 的子节点插入到 existingChild 之前。existingChild 为可选项参数，当为 null 时其效果与 appendChild 一样。
target.insertBefore(newChild, existingChild)
（2）下面表示 newChild 作为 target 的子节点插入到 existingChild 之后。existingChild 为可选项参数，当为 null 时其效果与 appendChild 一样。
target.insertAfter(newChild, existingChild)
5，removeChild()
删除父节点的一个子节点。删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
parent.removeChild(existingChild)
三、动态链接事件
使用事件属性的方式，我们可以通过 JavaScript 代码把事件与函数关联起来。
//当用户单击某图片时，会调用swapImage()函数
var imgObj = document.getElementById("dayImage");
imgObj.onclick = swapImage;
注意：
- 关联函数时不要写成 imgObj.onclick = swapImage();
- 同时整个事件名要小写（onclick），不像 HTML 中使用事件属性那样不在乎大小写。
四、嵌入事件
我们也可以直接在想要添加事件处理程序时定义函数，这种技术就叫做嵌入函数。
var imgObj = document.getElementById("dayImage");
imgObj.onclick = function() {
//原来swapImage()函数的代码
}
window.onload = function() {
alert("页面已加载完毕!");
}
