处理HTML文档的第一步就是获得文档元素的引用,每一个元素在dom中就是一个节点,所有的元素在dom中就构成了一个dom树。可以通过某一个节点找到其他说有的节点。
1.一切皆是节点
就是html中的所有的内容都被描述为节点,只是用不同的类型进行描述的的。
eg: <p font="13px #CCC">我是本文节点</p>
p是元素节点
font 是属性节点,有属性和值
我是文本节点:是文本节点
2.Node 接口定义的方法
HTML文档中解析为dom后,所有的内容变为节点,不同的节点用不同的类型,每个类型的节点对应一个接口,有element atrr text document 等。
element 和document 都是继承与Node接口。
Node 接口对应的方法:
appendChild() 在元素中的最后一个子元素后面追加元素。
cloneNode() 克隆一个节点
hasAttributes() 判断元素是否有属性
insertBefore() 在元素之前插入一个兄弟节点
removeChild() 从子节点列表中删除一个子节点。
replaceChild() 替换一个子节点。
属性:
nodeName: 节点名称
nodeValue: 返回节点值
nodeType: 返回节点类型
parentNode: 返回父节点
childNode: 返回所有子节点 firstNode:第一个子节点 lastChild: 最后一个子节点, previousSibling:前一个节点, nextSibling:后一个节点
attributes:返回该节点的所有属性
ownerDocument: 返回该节点对应的document 对象。
eg:获得一个根元素,通过这个根元素遍历所有的节点。 可以遍历属性节点 文本节点,删除节点,添加,克隆,替换。
var root=document.documentElement;
var nodeList=root.childNode;//方法一
for(var i=0;i<nodeList.length;i++){
if(nodeList[i].nodeType==1)
document.write(nodeList[i].nodeName+"="+)
if(nodeList[i].nodeType==3)
document.write(nodeList[i].nodeName+"="+nodeList[i].nodeValue);
}
var childe=root.firtstChild;
while(child!=null)
{
//输出
childe=root.nextSibling;
}
2.2. 对html元素中的节点 属性 和内容删除
删除节点
removeChild(childenode) //删除节点的子树
eg: root.removeChild(root.firstChild);
删除节点属性
Element.removeAttribute(sName);
eg: root.removeAttribute("id"); //移除当前属性
root.getAttribute("id"); //获得当前属性
删除节点的属性节点
Element.removeAttributeNode(arr_id) //arr_id 是属性节点
删除节点中的文本内容(文本作为文本节点 可以先获得文本节点)
Element.removeChild(textNode);
2.3. 使用replaceChild方法替换节点
replaceNode=parentNode.replaceChild(sNewNode,sChildNode),是用newNode 代替sChildNode 并且返回替换节点的引用。
3.下面接口都是在node的基础上继承下来的, document,Attr , Element , text接口他们除了 Node接口外还有其他的方法和属性
3.1 document接口(代表整个HTML 文档)
创建节点
ele.createElement("div");// 创建元素节点
ele.createText(textName); //创建文本节点
ele.createAttribute(sName); // 创建属性节点
3.2 Attr 接口
可以通过属性对象获取属性的名称 和值 attr.name attr.value;
可以先通过Node 中的getAttributeNode() 方法获得这个元素中的属性节点,然后用这个属性节点通过 Attr 接口属性 name ,value 获得对应的属性名称和属性值。
attr=ele.getAttributeNode();
var a=attr.name;
var b=attr.value;
3.3 Element接口
element对象可以使用 document.getElementById(), document.getElementsByTagName()方法获取该元素的节点以进一步处理。主要用来处理元素的属性。
eg: var div=root.getElementById("one");
var cl=div.getAttribute("class") // 通过element 对象获取元素的属性
1. 将元素节点插入到文档中
// 1.可以用 appendChild() 插入
var obj=document.creatElement("p");
div.appendChild(obj);
obj.parentChild.appendChild(obj);
// 2.可以用beforeInsert()插入 //这个是InsertBefore()
var iobj=obj.cloneNode(false);
div.InsertBefore(obj,div.firstChild); // 是将第一参数插入到第二个参数之前
2. 元素添加属性
使用setAttribute("class","font='13px'");// 添加元素属性
使用 var t=ele.createAttribute("id"); // 创建元素节点
使用 ele.setAttributeNode(t);
HTML5Document相关属性和方法 是继承至document core对象
document. getElementByTagName()方法
是返回一个节点列表,他包含了与指定节点名匹配的所有后代(不仅包括子后代)。
document.getElementByTagName(" *")====root.childNodes; 是节点名称 比如 p span tr td a。。。
document.getElementsByName() 是根据name属性获得元素, name 的属性包括button input select textarea form object map output fieldset meta param 等。
document.getElementById("id号");
//通过id 号获得该唯一的元素
document.getElementByClassName(“main”)// 是通过元素的class 属性获得元素对象。
innerHTML 和 outerHTML 是所有的元素都可以有的方法
ele.innerHTML="string"+a; //其中字符串要用“” a 是变量 可以用+ 链接
ele.outHTML, 是返回ele的整个元素内容,包含元素标签本身。
document.write()
document.writeln()// 里面放字符串,可以是HTML ,是document的方法
css选择反问元素
Element querySelector(selectors) //返回第一个元素
NodeList querySelectorAll(selectors) // 返回所有符合 的元素集合
selectors: body p //p 是body 的泛子节点
body>p // p是body 的直接子节点
HTML5表单处理