javascript之DOM（一节点类型Node）
DOM（Document Object Model）是针对HTML和XML文档的一个API。DOM描述的是一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。起源于DHML，现为W3C的推荐标准。
IE中的所有DOM对象都是以COM对象的形式实现。
节点层次
DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中的不同信息及标记。每个节点都有各自的属性，数据和方法，同时也与其他节点存在联系。所有页面标记表现为以一个特定节点为根节点的属性结构。
<html>
<head>
<title>Test</title>
</head>
<body>
<p>Hello,world!</p>
</body>
</html>
其中<html>元素为文档元素。文档元素时文档的最外层元素，文档中其他元素都包含在文档元素中，每个文档中只能有一个文档元素。HTML的文档元素一定是<html>,XML文档中没有预定义的文档元素，所以任何元素都可以成为文档元素。
HTML中元素通过元素节点来表示，属性通过属性节点表示，文档类型通过文档类型节点表示，注释则通过注释节点表示。共有12中节点类型，都继承自一个基类
1、Node类型
Node接口是由DOM的所有节点类型实现的，Node接口在javascript中是作为Node类型实现的，javascript中所有节点类型都继承自Node类型，因此所有节点类型都有相同的基本属性和方法。
Node.ELEMENT_NODE(1)//如果一个节点是元素类型，则该节点的nodeType==1
<p id="pd">Hello,world!</p>
<script type="text/javascript">
alert(pd.nodeType);//
alert(pd.nodeName);//p
</script>
说明p节点是Element类型
Node.ATTRIBUTE_NODE(2)//节点为属性类型
<p id="pd" name="test">Hello,world!</p>
<script type="text/javascript">
alert(pd.nodeType);//
alert(pd.nodeName);//
var p=document.getElementById("pd");
alert(p.getAttribute("name"));//test
alert(p.getAttributeNode("name").nodeType);//2
</script>
通过元素节点的getAttribute获取属性节点。
Node.TEXT_NODE(3)//文本节点，空格等字符串也算是文本节点
<p id="pd" name="test">Hello,world!</p>
<script type="text/javascript">
var p=document.getElementById("pd");
alert(p.firstChild.nodeValue);//Hello,world!
alert(p.firstChild.nodeType);//
</script>
元素节点下的第一个节点就是文本节点，所以可以用firstChild指向文本节点，然后在取节点的值。
Node.CDATA_SECTION_NODE(4)//xml文档中CDATA区域，CDATASection类型继承自Text类型
在xml文档，可以使用document.createCDATASetion()来创建CDATASetion类型
Node.COMMENT_NODE(8)//注释在DOM中是使用Comment来表示的
<p id="pd" name="test"><!--注释--></p>
<script type="text/javascript">
var p=document.getElementById("pd");
alert(p.firstChild.nodeValue);//注释
alert(p.firstChild.nodeType);//
</script>
使用父节点可以获取到注释。
Node.DOCUMENT_NODE(10)//javascript通过Document类型表示文档，Document类型表示整个HTML页面或xml页面
<p id="pd" name="test"><!--注释--></p>
<script type="text/javascript">
var h=document.documentElement;
alert(h===document.firstChild);//true
</script>
nodeName和nodeValue的值取决于，节点的类型。对于元素节点，nodeName的值为标签名，nodeValue的值为null；
节点关系：
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList对象是一个类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象在查询的过程中也可以修改。
<html>
<head>
<title>Test</title>
</head>
<body>
<p id="pd" name="test"><!--注释--></p>
<script type="text/javascript">
var h=document.documentElement;
var nodelist=h.childNodes;
for(var i=0;i<nodelist.length;i++)
{
if (nodelist.item(i).nodeType==Node.ELEMENT_NODE) {
alert(nodelist.item(i).nodeName);
}
} </script>
</body>
</html>
输出结果为HEAD，BODY,用于输出元素节点。h.childNodes取得了子节点序列。
每个节点都有父节点parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的节点都有相同父节点，它们的parentNode属性指向同一个节点。上面的HEAD和BODY的父节点都为HTML。同时同在childNodes列表中的节点都是同胞节点，可以通过当前节点的previousSibling属性和nextSibling属性来访问前后属性。例如body.previousSibling.nodeName===#text
父节点的firstChild和lastChild属性分别指向childNodes列表中的首尾节点。
操作节点：
当前节点的appendChild方法可以为当前节点的childNodes列表末尾添加一个节点
<script type="text/javascript">
var h=document.documentElement;
var end=document.createElement("end");
h.appendChild(end);
alert(h.lastChild.nodeName);//输出为end
</script>
insertBefore方法可以将节点插入到确定位置
<script type="text/javascript">
var h=document.documentElement;
var end=document.createElement("end");
h.insertBefore(end,h.lastChild);//插入到最后一个节点的前面 alert(h.childNodes[h.childNodes.length-2].nodeName);
</script>
replaceChild()方法接收两个参数，一个是节点，一个是要替换的节点。
normalize处理节点
javascript之DOM（一节点类型Node）的更多相关文章
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
- JavaScript的DOM操作(节点操作)
创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- DOM Document节点类型详解
在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...
- DOM之节点类型加例子
DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法.D ...
- javascript之DOM(三Element类型)
Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...
- javascript之DOM(四其他类型)
一.Text类型 文本节点由Text类型表示,指的是可以以字面意思解释的纯文本内容,其中包含HTML代码. nodeType=3 nodeName=#text nodeValue=文本内容 paren ...
随机推荐
- flutter：Could not download kotlin-gradle-plugin.jar
我们可以看到是flutter的外部依赖:kotlin-gradle-plugin-1.2.71 下载不了,下面我介绍使用手动下载的方式去解决: 首先,看到flutter项目目录,注意我标出的是运行项目 ...
- 实验1 C语言开发环境和数据类型、运算符、表达式
#include <stdio.h> int main () { int x; printf("输入一个整数:\n"); scanf("%d",&a ...
- Linux配置DHCP服务器，DHCP中继配置
配置dhcp服务器 第一步:配置网卡 第二步: 安装dhcp (需要先构建yum仓库,构建yum仓库的方法在之前的博客里有) 编写dhcp.conf文件 进去以后会出现这个内容 需要执行下面的内容将内 ...
- 8.7 NOIP模拟测试14 旋转子段+走格子+ 柱状图
T1 旋转子段 30% 暴力枚举起点和长度,暴力判断,o(n3) 不知道为什么我拿了40分... 60% 每一个点都有一个固定的旋转中心可以转成固定点,枚举旋转点和长度. 100% 用一个vecto ...
- [LeetCode] 592. Fraction Addition and Subtraction 分数加减法
Given a string representing an expression of fraction addition and subtraction, you need to return t ...
- java web开发入门七（mybatis）基于intellig idea
mybatis 一. 入门开发步骤 1.导入相关jar包 mybatis3.4.2核心开发包 asm-5.1.jarcglib-3.2.4.jarcommons-logging-1.1.3.jarlo ...
- Github库名命名规范
必要性说明 由于迁移到Github上的项目越来越多,对项目的管理越来越困难.由于各项目命名具有随意性,用之代表git仓库名后就很难快速回忆起这个项目的相关细节,通常需要不断打开某个库才能有所了解.因此 ...
- 计时器StopWatch的几种写法
下面提供三种计时器的写法供大家参考,大家可以自行选择自己钟爱的使用. 写法一(Spring 包提供的计时器): import java.text.NumberFormat; import java.u ...
- Linux 启动数据库报错：could not open parameter file init**.ora
sqlplus /nolog.conn /as sysdba.startup命令后显示 SQL> startupORA-01078: failure in processing system p ...
- Docker 部署ELK之Sentinl日志报警
前篇文章简单介绍了Docker 部署ELK,以及使用filebeat收集java日志.这篇我们介绍下日志报警配置,这里我们使用Sentinl插件. 1.修改kibana参数 进入elk容器,修改对应参 ...