<html>
<head>
<meta http-equiv="content-type" content="text/htmlcharset=GBK">
<title>js appendChild removeChild 添加 删除 子节点</title>
<script type="text/javascript">
function createSpan(){
var span=document.createElement_x_x("span")
span.innerHTML="子节点"
document.getElementByIdx("content").appendChild(span)
}
function deleteSpan(){
var content=document.getElementByIdx("content")
//var childs=content.childNodes//ie 和ff 获取子节点不一致(ff会将TEXT_NODE计入在内)
var childs=content.getElementsByTagName_r("span")
if(null!=childs){
content.removeChild(childs[childs.length-1])
}
}
</script>
</head>
<body>
<div id='content' style='background-color:#ff0000'>
<span>节点</span>
</div>
<input type='button' onclick="createSpan()" value="创建节点"/>
<input type='button' onclick="deleteSpan()" value="删除节点"/>
</body>
</html>
1.document.getElementById("id名")通过id属性的值查找，返回满足条件的第一个元素
2.document.getElementsByTagName("标签名")
通过标签名来获取页面中的元素。返回的是多个标签。
并不是真正的数组，但是我们可以想操作数组一样操作他（类数组）
3.document.getElementsByClassName("class名")
通过类名来获取页面中的元素。返回的也是多个标签
4.document.getElementsByName("表单元素name")
通过表单的name属性的值来获取元素
5.document.querySelector("div p a")
匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。
6.document.querySelectorAll("div")
获取所有满足条件的元素
7.三个特殊节点
8.childNodes 所有节点。包括各种节点
9.fristChild 获取一个元素的第一个子节点
10.lastChild 获取一个元素的最后一个子节点
11.parentNode 获取一个元素的父节点
12.previousSibling 获取一个元素的上一个兄弟节点
13.nextSibling 获取一个元素的下一个节点
14.children 只获取子元素
15.firstElementChild 获取第一个元素子节点
16.lastElementChild 获取最后一个元素子节点
17.nextElementsibling 获取下一个元素兄弟节点
18.previousElementsibling 获取上一个元素兄弟节点
19.parentElement 获取父元素节点
20.childElementCount 获取子元素的个数
1.document.createElement(元素名) 创建一个元素节点
2.document.createTextNode("这是新创建的一段文本") 创建一个文本节点
3.appendChild() 添加元素到容器中
4.insertBefore() 在一个节点前插入新节点
5.removeChild() 删除子节点
6.replaceChild() 替换子节点
7.cloneNode() 克隆节点 传入true则复制所有节点
8.setAttribute() 给元素设置属性
参数1：属性的名
参数2：属性的值
如果属性不存在，则添加；存在，则修改
9.romveAttribute() 删除属性
参数：要删除的属性名
10.getAttribute() 获取属性的值
参数：属性名
11.访问 元素 id 名
box.id
12.访问 元素 class 名
box.className
box.classList 类数组
13.获取标签名
box.tagName
box.nodeName
14.innerHTML属性
innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。
值为为文本
15.innerText属性
16.outerHTML
跟innerHTML相比多包括了一个它自身
1.访问行内（内联）样式表
2.内部样式表和外部样式表的获取
getComputedStyle()
参数1：表示样式表所属的元素
参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传
兼容性问题
3.获取元素实际的宽高
offsetWidth 宽
offsetHeight 高
4.获取元素参考父容器的left 和 top
offsetLeft 距离左部
offsetTop 距离上部
offsetParent 查找这个元素的参照父容器
DOM(即 Document Object Mode) 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
其中，在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
DOM 处理中的常见错误是希望元素节点包含文本。举个栗子：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。
可通过节点的 innerHTML 属性来访问文本节点的值。
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
DOM操作示例
<html><body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!"
//内容变更为new text
document.getElementById("p1").style.color="blue"
//蓝色
</script>
</body>
</html>
