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教程

  • 2013年11月20日 21:20
  • 1.32MB
  • 下载

html dom教程

html dom教程(摘录) 一。简介 HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。 ---------------------------...

simple_html_dom下载及教程

  • 2017年10月28日 18:10
  • 64KB
  • 下载

HTML DOM官方教程 CHM

  • 2013年04月04日 13:40
  • 581KB
  • 下载

jQuery基础教程之DOM操作-HTML&文本&值的操作

今天主要讲解jquery中的三个方法的使用,他们分别是html()、text()、val()。 这三个jquery方法的使用方式一样都有三种,下面请看用法和DEMO。 html() ...

HTML DOM 教程

  • 2013年01月31日 11:55
  • 7.48MB
  • 下载

HTML DOM基础教程

====================================================== 注:本文源代码点此下载 =============================...

html—dom教程

  • 2013年05月03日 10:46
  • 591KB
  • 下载

HTML DOM 精简知识教程

====================================================== 注:本文源代码点此下载 =============================...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html dom 教程
举报原因:
原因补充:

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