DOM简介
全称Document Object Model,即文档对象模型。DOM描绘了一个层次化的树,允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,组建好之后,按照树的结构将页面显示在浏览器的窗口中。
节点层次
HTML网页是可以看做是一个树状的结构,如下:
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树,是由多个节点(Node)组成的,节点的类型有很多种。
节点最多有一个父节点,可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。
document : 代表当前页面的整个文档树。
访问属性
all
forms
images
links
body
获取节点对象案例
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
通过节点关系查找节点
从一个节点出发开始查找:
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。(兄节点)
previousSibling 获取当前节点的上一个节点。(弟节点)
示例1:
firstChild属性最普遍的用法是访问某个元素的文本:
var text=x.firstChild.nodeValue;
示例2:
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点:
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
获取节点对象的信息
每个节点都包含的信息的,这些属性是:
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
nodeType nodeType 属性可返回节点的类型。 --------------------------------- 元素类型 节点类型 ------------------ 元素 1 就是标签元素,例<div>..</div> 文本 3 标签元素中的文本 注释 8 表示为注释 nodeName nodeName 属性含有某个节点的名称。 -------------------------------- 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document nodeValue 对于文本节点,nodeValue 属性是所包含的文本。 对于属性节点,nodeValue 属性是属性值。 对于注释节点,nodeValue 属性注释内容。 nodeValue 属性对于文档节点和元素节点是不可用的。
节点操作
创建新节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中,child之前。
// 参数1:要插入的节点 参数
插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点
创建节点
document.createElement("标签名") 创建新元素节点 elt.setAttribute("属性名", "属性值") 设置属性 添加节点到文档树上: elt.appendChild(e) 添加元素到elt中最后的位置 把元素添加最后一个子节点的后面。 elt.insertBefore(new, child); 添加到elt中,child之前。// 参数1:要插入的节点 参数2:插入目标元素的位置
正则表达式
位置:
^ 开头
$ 结尾
次数:
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个,最多m个
通配符:
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符(除'\n'外)
组合:
[a-z]
[0-9]
等
组:
(正则) 匹配括号中正则表达式对应的结果,并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果,但不暂存这个结果。
\数字 使用第n个组匹配的结果
使用正则的工具(RegExp类与相关方法)
创建:
// 方式一
var regex = new RegExp("正则表达式", "标志");
// 方式二
var regex = /正则表达式/标志
参数说明:
正则表达式:
参见上面的规则
标志:
g (全文查找出现的所有 pattern)
i (忽略大小写)
m (多行查找)
方法:
Regexp.test( str )
String.replace( regex, str )