DOM 知识点梳理(笔记)

  1998年10月DOM1级规范成为了W3C的推荐标准,为基本的文档结构及查询提供了接口。

一、Node类型

  每个节点都有个nodeType属性,表明了节点的类型。共有12种类型:

元素节点                   Node.ELEMENT_NODE(1)

属性节点                   Node.ATTRIBUTE_NODE(2)

文本节点                   Node.TEXT_NODE(3)

CDATA节点                    Node.CDATA_SECTION_NODE(4)

实体引用名称节点        Node.ENTRY_REFERENCE_NODE(5)

实体名称节点             Node.ENTITY_NODE(6)

处理指令节点             Node.PROCESSING_INSTRUCTION_NODE(7)

注释节点                      Node.COMMENT_NODE(8)

文档节点                      Node.DOCUMENT_NODE(9)

文档类型节点            Node.DOCUMENT_TYPE_NODE(10)

文档片段节点            Node.DOCUMENT_FRAGMENT_NODE(11)

DTD声明节点                 Node.NOTATION_NODE(12)

  这12个类型并不完全受到浏览器的支持;而开发人员常用的就是前三个(元素节点,属性节点,文本节点)

 if(someNode.nodeType==3){//为了兼容ie,通常将noteType的属性值与数值进行比较}

  此外节点还有nodeNames和nodeValue这两个属性。而这二个属性的值完全取决于节点的类型。

 

1)对于nodeName来说

  元素节点的 nodeName 是标签名称。
  属性节点的 nodeName 是属性名称。
  文本节点的 nodeName 是 #text。
  文档节点的 nodeName 是 #document。

2)对于nodeValue来说

  文本节点的nodeValue 属性包含文本。
  对于属性节点的nodeValue 属性包含属性值。
  文档节点的nodeVlaue为null。
  元素节点是nodeVlaue为null。

 

1.1节点关系:

  每个节点都有一个childNodes属性,其中保存着一个NodeList对象,它是基于DOM结构动态执行查询的结果而不是一张初次访问时的快照。

每个节点也都有个parentNode节点,该属性指向文档节点的父节点。childNodes列表中所有的节点都具有相同的父节点。而且它们之间都是同胞节点,可以通过previousSibling和nextSibling互相之间访问,父节点的firstChild和lastChild分别指向childcNodes列表的第一个和最后一个j节点。

1.2操作节点

appendChild()方法:

  用于向父节点的chidNodes末尾添加一个节点。如果传入到appendChild()的节点已经是文档中的一部分了,那么该节点会从原来的位置转移到新的位置上。

例如:

<div id="ss">hi <p>1</p><p>2</p><p>3</p></div>

<script>
var ss=document.getElementById("ss");
ss.appendChild(ss.firstChild);
alert(ss.lastChild.nodeValue);//hi 第一个文本节点 变成了最后一个节点
</script>

insetBefore()方法:

  这个方法接受二个参数:要插入的节点和作为参照的节点。插入后被插入的节点会变成参照节点的前一个同胞节点。

  如果参照节点是null那么执行和appendChild相同的操作。

replaceChild()方法:

  这个方法接受二个参数:要插入的节点和要替换的节点。返回替换的节点。

removeChild()方法:

  这个方法接受一个参数,即要移除的节点。返回被移除的节点。

上面的四个方法在调用时,都是在某个节点的子节点上操作,所以都必须先取得它们的父节点!

cloneNode()方法:

该方法接受一个布尔型参数表示是否进行深浅负责,为true时执行深复制(复制节点及其整个子节点树),为false时执行浅复制(只复制节点本身)。

var ss=document.getElementById("ss");var tt=ss.cloneNode(true);
  ss.appendChild(tt);//复制完后,为他指定父节点,将它添加到文档中

二、Document类型

  document对象是HTMLDocument的一个实例,表示整个HTMl页面。

  可以通过document.documentElement和document.body来取得对<html>和<body>的引用

文档信息:

document.title包含着<title>元素中文本的引用。

document.URl包含着页面完整的URl。

document.domain包含着页面的域名。它是可读取也可设置的,进而可以对二个页面进行通信设置。

document.referrer保存着链接到当前页面的那个页面的URl。

查找元素:

document.getElementById();

document.getElementsByTagName();

特殊集合:

document.anchors  包含文档中所有带name特性的<a>标签 

document.forms   包含文档中所有的<form>元素

document.images   包含文档中所有的<img>元素

document.links    包含文档中所有带href特性<a>元素

文档写入:

document.write()或writeln()

  可以在页面加载过程中动态的向页面加入内容。

三、Element类型

时间: 2024-08-30 01:15:56

DOM 知识点梳理(笔记)的相关文章

jquery知识点梳理

jQuery知识点梳理 一.              jquery选择器 基本选择器 ID选择器 类选择器 标记选择器 分组选择器 通配符选择器 层次选择器 $(“ancestor descendent”):祖先后代选择器    空格 $(“parent > child”):父子选择器   大于 $(“prev + next”):相邻后兄弟元素选择器   加号 $(“prev ~ siblings”):所有后兄弟元素选择器  波浪线 过滤选择器:基本过滤选择器 :first.:last.:od

Javascript重要知识点梳理

Javascript重要知识点梳理 说明 Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for Javascript常用函数 1.  字符串函数 substring indexOf lastIndexOf charAt replace split toLowerCase toUpperCase 2.  数学运算函数 3.  数据类型转换函数 parseInt parseFloat Math.abs Mat

HTML DOM(学习笔记二)

嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式,更加接近我们的HTML文档的表现形式的样式是这样的,如下图所示: 在HTML DOM中,所有的事物都是节点.HTML DOM就是被视为节点树的HTML.根据W3C的HTML DOM标准,HTML文档中所有内容都是节点,如上图

[独孤九剑]Oracle知识点梳理(十)%type与%rowtype及常用函数

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs

[独孤九剑]Oracle知识点梳理(七)数据库常用对象之Cursor

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(八)常见Exception

[独孤九剑]Oracle知识点梳理(八)常见Exception

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs

[独孤九剑]Oracle知识点梳理(九)数据库常用对象之常见package

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs

[独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Cursor [独孤九剑]Oracle知识点梳理(八)常见Exception

[独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure、function、Sequence

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Cursor [独孤九剑]Oracle知识点梳理(八)常见Exception [独孤九剑]Oracle知识点梳理(九)数