coreDOM 处理dom树

处理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表单处理

时间: 2024-08-29 02:39:41

coreDOM 处理dom树的相关文章

jQuery学习笔记之DOM树、创建新节点、append方法

DOM树. 创建新节点.创建元素节点和文本节点. 创建元素节点/文本节点/属性节点 节点内部插入元素append方法 节点内部插入元素prepend方法 节点外部插入元素after方法 节点外部插入元素before方法 DOM树 创建div元素节点 创建元素节点和文本节点 创建元素节点.文本节点.属性节点 append方法 prepend方法 after方法 before方法

从Chrome源码看浏览器如何构建DOM树

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-

【VB6】使用VB6创建和访问Dom树【爬虫基础知识 】

使用VB6创建和访问Dom树 关键字:VB,DOM,HTML,爬虫,IHTMLDocument 我们知道,在VB中一般大家会用WebBrowser来获取和操作dom对象. 但是,有这样一种情形,却让我们纠结不已: 我们需要做爬虫,然后爬虫不需要太高的效率,但是我们被复杂的正则表达式给弄的头晕眼花. 不知道何去何从. 今天,下定决心研究下html的解析,终于掌握了对IHTMLDocument等接口对象的使用. 源代码放在:http://www.extencent.com 具体的文章将会放在博客园以

遍历Dom树

遍历Dom树,可以返回当前页面有那些元素及其数量 (function(){ //遍历Dom树 var doms={ length:0 } function eachDomTree(root){ var childNodes=root.childNodes, len=childNodes.length; for(var i=0;i<len;i++){ var item=childNodes[i]; if(item.nodeType===1){ var tagName=item.nodeName.t

JS的Dom树小结

一[DOM树节点] DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点: 通过getElement系列方法,可以去到元素节点. 二[查看节点] 1.getElementById:通过ID获取唯一的节点:多个同名ID,只会取第一个: 2.getElementsByName:通过Name取到一个数组,包含1到多个节点: 使用方式:通过循环,取到每一个节点.循环次数:从0开始,<数组.length 三[查看和设置属性节点] 1.查看属性节点: getAttr

通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我将介绍如何实现使用该插件生成HTML元素Dom树,并对其进行多样操作. 先贴上一个简单的HTML页面(直接拿的ztree的用的,画面简单实用,里面的文字内容不用在意) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-e

DOM树操作

DOM 操作 访问与树关系(节点) 绘制 DOM 树: childNodes, attributes 从一个中心元素访问其所有的直系亲属元素 访问父节点: parentNode 访问上一个兄弟节点: previousSibling 访问下一个兄弟节点: nextSibling 访问第一个属性节点: attributes[ 1 ] 访问第一个子节点:fristChild 或 childNodes[ 0 ] 访问最后一个子节点: lastChild 或 childNodes[ childNodes.

dom树的介绍,及原理分析

三.解析和DOM树的构建 1.解析: 由于解析渲染引擎是一个非常重要的过程,我们将会一步步的深入,现在让我们来介绍解析. 解析一个文档,意味着把它转换为一个有意义的结构——代码可以了解和使用的东西,解析 的结果通常是一个树的节点集合,用来表示文档结构,它被称为解析树或者语法树. 例子: 解析表达式“2+3-1”,返回树如下图3.1 1).语法: 解析是基于文档所遵循的语法规则——书写所用的语言或格式——来进行的.每一种可以解析的格式必须由确定的语法与词汇组成.这被称之为上下文无关语法. 人类语言

CSS规则树和HTML的DOM树合成渲染树时渲染结点与选择器链的匹配

在浏览器内核(排版引擎)CSS规则树和HTML的DOM树合成渲染树的时候,会涉及到渲染树的位置属性的问题,因为其位置属性将通过CSS选择器链的优先级来决定,而渲染树的某个结点可能会同时满足多个选择器链,这时候就要通过选择器的优先级来完成属性的赋值. 在这个地方,我仅仅处理了几个简单的选择器情况:{(.class)     (#id)       (element)      (#id,.class,elememt)      (#id>.class)        (#id element)