23@JavaScript_day04
一、DOM
1、什么DOM？
Document Object Model(文档对象模型)可以将一个结构化的文档(比如xml,html)转换成一棵符合DOM规范的树，通过对DOM树的操作(DOM规范定义了DOM节点应该提供哪些属性和方法)来实现对结构化的文档的操作。
2,什么是w3c DOM?
是由w3c组织定义了一套DOM规范，由于定义如何将一个html文件转换成一棵符合w3c DOM的树。
3、浏览器如何将html文件转换成w3c DOM树(了解)
Node
Document
HTMLDocument
HTMLBodyElement
Element
HTMLElement
HTMLFormElement
HTMLInputElement
HTMLSelectElement
HTMLOptionElement
HTMLDivElement
HTMLTableElement
HTMLTableCaptionElement
HTMLTableRowElement
HTMLTableCellElement
...
4、w3c DOM操作
1)查找
a, 依据节点的id来查找
//document是window下面的一个子节点
//是HTMLDocument实例，表示整个w3c dom
//树的根。
var obj document.getElementById(id);
b,遍历
parentNode
previousSibling
nextSibling
childNodes firstChild lastChild
ie,ff以及其它浏览器对遍历的方式支持不一，为了兼容性的考虑，尽量少用。如果一定要用，要区分浏览器再写代码。
c, var arr = getElementsByTagName(tagName)
查找到某个节点之后，可以进行如下的操作：
操作一：改样式(style属性)。
操作二：读取或者修改节点之间的html内容(innerHTML属性)。
操作三：读取或者修改节点的值(value属性)。
2)创建
document.createElement(TagName);
比如:
var obj = document.createElement('div');
3)添加
arentNode.appendChild(obj):
//作为最后一个孩子添加
parentNode.insertBefore(obj,refNode):
//添加到refNode之前
parentNode.replaceChild(obj,refNode):
//替换refNode
4)删除
parentNode.removeChild(obj);
5)样式操作
方式一：修改节点的style属性
step1 要保证要修改的样式是以内联样式的方式存在的。即
View Code
1 <div style="display:none;" id="d1"> 2 <div style="background-color:red;">
step2 找到要修改样式的节点 即
var obj = document.getElementById("d1");
step3 修改style属性
obj.style.display = 'block';
//要注意，如果要修改的样式名包含了"-",则将"-"号除掉，然后将后面的单词的第一个字母大写。
obj.style.backgroundColor = 'green';
方式二：修改节点的className属性
step1 找到要修改样式的节点
var obj = document.getElementById("d1");
step2
obj.className = 'class选择器的名称';
二、 如何禁止浏览器的默认行为?
1、当点击链接时，浏览器会向href指向的地址发请求。
2、当点击提交按钮,浏览器会action所指定的地址发请求。
View Code
1 <a href="">test</a> 2 <form action=""> 3 <input type="submit" value="Conform"/> 4 </form>
3、如果要禁止以上的默认行为，可以采用：
View Code
1 <a href="" onclick="return false;">test</a> 2 <form action="" onsubmit="return false;"> 3 <input type="submit" value="Conform"/> 4 </form>
练习：
在注册页面当中，添加身份证号码的验证：
身份证号码必须是15位数字或者是18位数字(如果是18位数字，则最末一位可以是"X"或者"x")
