html dom 教程

原创 2007年09月18日 11:55:00

html dom教程

  html dom定义了访问html的标准方法。

  Html domhtml文档呈现为带有元素、属性和文本的树结构(节点树)。

  根据domhtml文档中的每个部分都是一个节点。

Dom这样规定:

      整个文件是一个文档节点

      ▼ 每个html标签是一个元素节点

      ▼ 包含在html元素中的文本是文本节点

      ▼ 每个html属性是一个属性节点

      ▼ 注释属性注释节点

  一棵节点树中的每个节点都是彼此有关系的。有父节点、子节点及同辈的关系。文档节点是所有节点的父节点。<head>元素节点一般是<html>元素节点的子节点。等等

 

1方法介绍

1.1 getElementById()getElementsByTagName()方法

可以使用getElementById()getElementsByTagName()方法和使用一个元素节点的parentNodefirstChildlastChild属性来查找希望的元素。

  特别的:getElementById()无法在xml中工作。

getElementById(“ID”) 根据ID返回元素。注意是元素。

getElementsByTagName(“TAG”) 根据标签名称,返回所有的元素,作为一个节点数组。这些元素是你在使用方法时所处的元素的后代。如: document.getElementsByTagName(“p”)返回document下所有的p元素。和

document.getElementById (“tag”).getElementsByTagName(“p”)返回文档节点下,idtag的元素下,所有p元素的节点列表。

getElementsByTagName(“p”)返回值是索引号从0开始的数组。可以用length属性来遍历节点列表。

 

.1.2  parentNodefirstChildlastChild

用这三个属性可以按照文档的结构,在文档中进行短距离的查找。

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Alaska</td>
  </tr>
</table>

 

var x = document.getElementsByTagName("td");

alert(x[0].fristChild.nodeValue);

 

.1.3 返回根节点

document.documentElementdocument.body

 

.1.4 节点信息nodeName nodeType nodeValue

  nodeName

  文档节点的nodeName永远是#document;文本节点的nodeName永远是 #text

元素节点的nodeName是标签的名称;属性节点的nodeName是属性名称;

 

nodeType

元素类型

节点类型

元素

1

属性

2

文本

3

注释

8

文档

9

 

nodeValue

元素结点、和文档结点没有nodeValue属性; 文档节点和属性节点nodeValue分别是它们的文本值和属性值

 

HTML DOM(一):认识DOM

什么是DOM?        通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript就需要对HTML文档中所有元...
  • ghsau
  • ghsau
  • 2012年07月18日 21:09
  • 36949

DOM(一)——HTML DOM

对于B/S开发,客户端与服务器端的交互是非常必要的,JavaScript的提出解决了很多问题,AJAX的提出也解决了异步通信的问题,更加为用户着想了。而DOM是其中非常基础的知识,在学习AJAX的同时...
  • liujiahan629629
  • liujiahan629629
  • 2013年11月27日 20:45
  • 18652

关于html的table转成图片的js插件dom-to-image

关于把html页面中的table表格,转成图片显示。这方面的需求可能在实际开发中,可能会遇到展示的表格转换成图片上传服务器或者其他处理,一般是遇不到。记录一款还不错的插件, dom-to-image...
  • shizy102493957
  • shizy102493957
  • 2018年01月04日 10:17
  • 141

核心DOM和html DOM的区别

DOM分为三部分: (1)核心DOM:遍历DOM树、添加新节点、删除节点、修改节点 (2)HTML DOM:以一种简便的方法访问DOM树 (3)XML DOM:准用于操作XML文档 ...
  • qq_34187209
  • qq_34187209
  • 2016年08月28日 21:02
  • 8376

HTML属性与DOM属性的区别

对于浏览器引擎而言,并不存在“HTML标签”这回事,其本质是DOM节点对象。也并不存在“HTML文档”这回事,其本质是DOM节点对象组成的文档树。浏览器引擎只是存储和渲染DOM节点对象。...
  • BonJean
  • BonJean
  • 2016年10月05日 23:33
  • 1530

Java网络爬虫--HTML DOM(HTML 基础)

最近一直在学习Java方面的网络爬虫,然后要使用Jsoup解析html页面(htmlparse已经不建议使用了),但是对于Jsoup中的很多类和方法都很疑惑,查阅相关资料后发现使用Jsoup之前首先要...
  • championhengyi
  • championhengyi
  • 2017年02月27日 23:16
  • 1554

HTML DOM 教程(5)

通过 DOM,您可访问 HTML 文档中的每个节点。查找并访问节点你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagNa...
  • jimung
  • jimung
  • 2008年04月15日 10:36
  • 322

HTML DOM 教程(2)

HTML 文档对象模型(HTML Document Object Model)定义了访问和处理 HTML 文档的标准方法。您应当具备的基础知识在继续学习之前,您需要对下面的知识有基本的了解: ...
  • jimung
  • jimung
  • 2008年04月15日 10:34
  • 200

HTML DOM 教程(3)

HTML 文档中的每个成分都是一个节点。节点根据 DOM,HTML 文档中的每个成分都是一个节点。DOM 是这样规定的: 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 ...
  • jimung
  • jimung
  • 2008年04月15日 10:34
  • 180

XML DOM.HTML DOM和JS之间的关系

W3C所制订的DOM Level分为两大模块:Core和HTML。 1.Core核心,W3C规范:满足软件开发者和Web脚本编写者,访问和操控产品项目中包含的可解析的HTML和XML内容。 ...
  • qq_32468225
  • qq_32468225
  • 2016年12月13日 06:54
  • 651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html dom 教程
举报原因:
原因补充:

(最多只允许输入30个字)