javascript篇三dom解析html

DOM解析html
DOM：（Document Object Model)文档对象模型
文档：封装的标签 样式的文本。
对象：封装文档的实例。
模型：文档的共同特征。

sax解析：是民间的一种解析技术 sax解析速度比较快 sax解析不能实现增删改查
Dmo解析是官方的解析技术，Dmoz解析增删查改方便，但是占用内存比较大
所有的标签语言都可以使用Dom解析：html xhtml html5 xml...
Dhtml:不是一门语言是多个技术的综合
Dhtml：html css Dcoument javascript
html:是封装标签的文本
css：就是封装样式的定义
Document：就是封装文档
javascript：是在静态产生动态效果
Dhtml+XmlHttpRequest=ajax(技术)
Bom解析：浏览器对象模型
Brower 
Object 
model

（table中不管写不写tbody标签，这个标签在Dom解析时都是存在的。）
navigator对象：

<script type="text/javascript">
navigator.appCodeName//获取浏览器的代码名称
navigator.appName//获取浏览器的名称
navigator.appVersion//获取浏览器的版本
</script>
按钮事件：onclick:单击
<input type="button" name="but" value="按钮" onclick="demo();"/>

window对象（窗口对象） alert（事件名）；
window.onload页面加载完毕
window.onUnload页面退出时使用
鼠标事件：
change事件：用于text textarea select标签 。
当内容发生改变时触发事件
onfocus事件：获取焦点
onblur事件：失去焦点
onclick:鼠标单击事件
onmouseover:鼠标经过事件
onmouseout:鼠标离开事件
onmouseMove:鼠标移动事件
onMouseDown：鼠标按下事件（单击双击都可以）

window中常用的方法：
window对象中的方法或者属性，写不写对象名都可以。
moveBy(11,22);x,y方向偏移
moveTo(11,22);移动到指定的（x,y）坐标

open打开一个新窗口
setTimeout("alert('你好')",2000);经过指定毫秒执行一个表达式。
setInterval("alert('你好')",2000);每经过指定毫秒执行一个表达式。

获取元素的三种方式：
<script type="text/javascript">
获取元素的三种方式
1.document.getElementById（"id号"）；通过id号获取元素，返回var类型元素
获取属性值：var类型元素.value;

2.document.getElementsByName("name属性值");通过name属性获取元素 获取的是一个容器
获取属性值：var类型元素[0].value;

3.document.getElementsByTagName("标签名");通过标签名获取元素 获取的是一个容器
获取属性值：var类型元素[0].value;
多个同名标签可以用for循环遍历
获取标签中的文本:id.innerHtml
</script>

dom增删改查节点
添加文本节点:
获取div元素
var divNode=document.getElementById("div");
创建文本节点
var add=document.createTextNode("一个文本")；
divNode.appendChild(add);
创建元素
var inputNode=document.createElement("input");
设置类型
inputNode.type="button";
设置属性
inputNode.value="一个按钮"；
把创建的元素添加到div
divNode.appendChild(inputNode);
或者一个函数只能添加一次标签，如果想一次添加多个，可以在双引号中写入多个html标签。
dNode.innerHTML="<input type='button' value='按钮'/>";

删除节点
获取节点
var divNode=document.getElementById("div");
获取父级节点,删除子节点
divNode.parentNode.removeChild(divNode);

替换节点
获取div3节点
var divNode=document.getElementById("div");
获取div1
var divNode1=document.getElementById("div1");
divNode.parentNode.replaceChild(divNode1,divNode);

克隆节点
获取div1
var dvNode1=document.getElementById("div1");
获取div4
var dvNode4=document.getElementById("div4");
克隆一个div1
var cipyDiv=divNode1.cloneNode();
用克隆的去替换
divNode4.parentNode.replaceChild(cipyDiv,dvNode4);

二级动联
function demo(){
建立二维数组
var array=[
["选择城市"],["海淀区"，"丰台区","朝阳区","通州区"],
["浦东区"，"浦西区","上海滩"],["东莞"，"惠州","佛山"],
["郑州"，"丰台区","朝阳区","通州区"],
];

获取两个下拉框
var se1Node=document.getElementById("se1");
var se2Node=document.getElementById("se2");
获取选择的位置
var index=se1Node.selectedIndex;
去容器中找到与之对应的城市
var arr=array[index];

完成清除动作
se2Node.length=0;//将原始的第一行去除，直接显示城市名。
保留第一行
se2Node.length=1;//从第二个位置开始。
遍历容器
for(var x=0;x<arr.length;x++){
创建option
var opNode=document.createElement("option");
opNode.innerHTML=arr[x];
把opNode添加到下拉列表框
opNode.appendChild(opNode);
}

}
<select onchange="demo()" id="se1">
<option>选择省市</option>
<option>北京</option>
<option>上海</option>
<option>河南</option>
</select>


<select id="se2">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>河南</option>
</select>