1.介绍
1.1 DOM 解释
说明:DOM全称 Document Object Model,即文档对象模型。将文档抽象成一个树型结构,文档中的标签、标
1.2 DOM 分类
按照操作对象的不同,可分为Core DOM、XML DOM 和 HTML DOM。
Core Dom:核心Dom,针对任何结构化文档的标准模型。 XML DOM:用于XML文档的标准模型,对XML元素进行操作。 HTML DOM:用于HTML文档的标准模型,对HTML元素进行操作。 1.3 DOM 功能
1、查询某个元素
2、查询某个元素的祖先、兄弟以及后代元素
3、获取、修改元素的属性
4、获取、修改元素的内容
5、创建、插入和删除元素
2. DOM 节点
文档中的所有内容都可表示为一个节点(node),如:HTML里整个文档、每个标签、每个标签的属性和文本都可作
2.1 节点分类
1、文档节点(Document):整个XML、HTML文档
2、元素节点(Element):每个XML、HTML元素
3、属性节点(Attr):每个XML、HTML元素的属性
4、文本节点(Text):每个XML、HTML元素内的文本
5、注释节点(Comment):每个注释
注意:这里的Document节点为总称,具体可分为XMLDocument和HTMLDocument,同理Element也可分为XM
2.2 HTML DOM 节点层次
节点彼此都有等级关系:父节点、兄弟节点、子节点等等。
3、获取 HTML 元素节点方法
文档节点(document)、元素节点可以通过getElementById、getElementsByName、getElementsByClassName
4、常用DOM操作
js操作dom节点
1.访问节点
document.getElementById(id);返回对拥有指定id的第一个对象进行访问document.getElementsByName(name
返回带有指定标签名的对象集合
注意:Elements
document.getElementsByClassName(classname);
返回带有指定class名称的对象集合
注意:Elements
2.生成节点
document.createElement(eName);创建一个节点document.createAttribute(attrName);对某个节点创建属性do
3.添加节点
document.insertBefore(newNode,referenceChild);
在某个节点前插入节点
parentNode.appendChild(newNode);
给某个节点添加子节点
4.复制节点cloneNode(true | false);
复制某个节点
参数:是否复制原节点的所有属性
5.删除节点
parentNode.removeChild(node)
删除某个节点的子节点
node是要删除的节点
注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做。在删除指定节点的时候不会
元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点 Internet Explorer 和 Mozilla 得到正确的方法。
6.修改文本节点appendData(data);
将data加到文本节点后面
deleteData(start,length);
将从start处删除length个字符
insertData(start,data)
在start处插入字符,start的开始值是0;
replaceData(start,length,data)
在start处用data替换length个字符
splitData(offset)
在offset处分割文本节点
substringData(start,length)
从start处提取length个字符
7.属性操作getAttribute(name)
通过属性名称获取某个节点属性的值
setAttribute(name,value);
修改某个节点属性的值
removeAttribute(name)
删除某个属性
< head>
8.查找节点parentObj.firstChild如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使
9.获取相邻的节点neborNode.previousSibling :获取已知节点的相邻的上一个节点nerbourNode.nextSlbling:
获取已知节点的下一个节点
10.获取父节点childNode.parentNode:得到已知节点的父节点
11替换节点方法replace(new,old)
< head>
hello world!
< /body>< /html>