飞比寻常 (JOE) 生，简单，活，简单，生活，不简单！
JOE个人网站
JOE个人网站，不仅仅是一个网站，更像是一个展现自我的平台，致力于让朋友们都可以
有所感触，有所收获。
1、每一个标签都可以认为是一个节点
2、节点有节点名
nodeName - 节点名就是标签名（大写）
节点有类型
nodeType
对于普通标签 1
对于属性 2
对于普通文本 3
在html代码中 所有内容都是节点，包括标签，属性，文本
节点有值
nodeValue
不是所有的节点都有值，
文本节点 有值
属性节点 有值
3、操作节点
a、找节点
父 parentNode
子 childNodes 一个父亲可以有多个儿子，所以子节点是一组内容
在标准html中，换行也认为是一个节点
firstChild 获取老大（第一个子节点）
lastChild 获取老末（最后一个子节点）
hasChildNodes() 判断有没有子节点的方法
兄 previousSibling
ob.previousSibling.innerHTML
弟 nextSibling
b、使用节点
1、创建节点
createElement(标签名)
2、追加节点
appendChild(对象)
---------------------previousSibling--------------------------
<html>
<head>
<script>
window.onload=function() {
var ob=document.getElementById('bid');
if(ob.previousSibling.nodeName=='#text') {
alert('文本节点不可以操作');
}
}
</script>
</head>
<body>
<p>
<b>a</b>
<b id='did'>b</b>
</p>
</body>
</html>
-----------------nodelist----------------------------
<script>
window.onload=function() {
var op=document.getElementById('pid');
alert(op.parentNode.parentNode.previousSibling.previousSibling.childNodes[1].nodeName)
}
</script>
</head>
<body>
<div>
<b></b>
</div>
<div>
<div>
<p id='pid'></p>
</div>
</div>
<div>
<p>
<i></i>
</p>
</div>
</body>
-----------------createElement-------------------------
<script>
window.onload=function() {
var odiv=document.getElementById('did');
var oimg=document.createElement('img');
oimg.src='./a.jpg';
odiv.appendChild(oimg);
}
</script>
</head>
<body>
<div id='did'></div>
</body>
-------------show---------------------------------
<script>
window.onload=function() {
var odiv=document.getElementById('did');
var oimg=document.createElement('img');
oimg.src='./a.jpg';
odiv.appendChild(oimg);
}
</script>
</head>
<body>
<div id='did'></div>
</body>
-----------------------------------------
1、删除节点
removeChild
function cl(oimg) {
document.body.removeChild(oimg);
}
2、替换节点
replaceChild(新的对象，要被替换的对象);
function change(op) {
oimg=document.createElement('img');
oimg.src='./a.jpg';
document.body.replaceChild(oimg,op);
}
3、克隆节点
cloneNode(true|false);
function kelong(op) {
var newop=op.cloneNode(true); //true所有属性和子节点，包括文件节点都被复制，如果是false，只复制标签而不复制属性和子节点；
document.body.appendChild(newop);
}
4、属性操作
a、设置属性 setAttribute(属性名，属性值);
oimg.setAttribute('src','./a.jpg');
b、获取属性 getAttribute(属性名)
function change(op) {
var oimg=document.createElement('img');
oimg.setAttribute('src','./a.jpg');
oimg.onclick=function() {
alert(oimg.getAttribute('src'));
}
document.body.appendChild(oimg);
}
c、删除属性 removeAttribute（属性名）；
function change(op) {
var oimg=document.createElement('img');
oimg.setAttribute('src','./a.jpg');
oimg.setAttribute('title','我爱你美女');
oimg.onclick=function() {
oimg.removeAttribute('title');
}
document.body.appendChild(oimg);
}
5、JS中的json
var str="{'name':'ztz','age':18}"; //对象的json格式
var str="['a','b','c']"; //数组的json格式
var obj=eval('('+str+')');
6、onchange 当下拉框发生变化的时候会自动触发该事件；
-----------------removeChild---------------------------------
<script>
function cl(oimg) {
document.body.removeChild(oimg);
}
</script>
</head>
<body>
<img src='./a.jpg' onclick='cl(this)'/>
</body>
------------------------replaceChild----------------------------------
<script>
function change(op) {
oimg=document.createElement('img');
oimg.src='./a.jpg';
document.body.replaceChild(oimg,op);
}
</script>
</head>
<body>
<p onclick='change(this)'>abc</p>
</body>
------------------cloneNode------------------------------------
<script>
function kelong(op) {
var newop=op.cloneNode(true);//true 所有属性和子节点，包括文本节点都被复制，如果是false，只复制标签而不复制属性和子节点
document.body.appendChild(newop);
}
</script>
</head>
<body>
<p onclick='kelong(this)'>abc</p>
</body>
---------------getAttribute---------------------------
<script>
function change(op) {
var oimg=document.createElement('img');
oimg.setAttribute('src','./a.jpg');
oimg.onclick=function() {
alert(oimg.getAttribute('src'));
}
document.body.appendChild(oimg);
}
</script>
</head>
<body>
<p onclick='change(this)'>abc</p>
</body>
-----------------------------------------