dom 文档对象模型 有关的知识

本文非本人原创,只是感觉对自己有用特拿来学习,特此声明。

document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

下面,举例说明document.createElement()的用法。<div id="board"></div>

例1:

<script type="text/javascript">
            var board = document.getElementById("board");
            var e = document.createElement("input");
            e.type = "button";
            e.value = "这是测试加载的小例子";
            var object = board.appendChild(e);
        </script>

效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。

例2:

<script type="text/javascript">
            var board = document.getElementById("board");
            var e2 = document.createElement("select");
            e2.options[0] = new Option("加载项1", "");
            e2.options[1] = new Option("加载项2", "");
            e2.size = "2";
            var object = board.appendChild(e2);
        </script>

效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。

 

例3:

<script type="text/javascript">
            var board = document.getElementById("board");           
            var e3 = document.createElement("input");
            e4.setAttribute("type", "text");
            e4.setAttribute("name", "q");
            e4.setAttribute("value", "使用setAttribute");
            e4.setAttribute("onclick", "javascript:alert(‘This is a test!‘);");           
            var object = board.appendChild(e3);
        </script>

效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。 当点击这个文本框时,会弹出对话框“This is a test!”。

根据上面例子,可以看出,可以通过加载对象的属性来设置,参数是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。

下面,我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同

比如我们要在下面这个div中插入一个子节点P时:<div id="test"><p id="x1">Node</p><p>Node</p></div>

我们可以这样写:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  //测试从这里开始
  //appendChild方法:
  oTest.appendChild(newNode);
  //insertBefore方法:
  oTest.insertBefore(newNode,null);
</script>

通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

   在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild);
</script>

效果:这个例子将在x1节点前面插入一个新的节点

又或:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild.nextSibling);
</script>

效果:这个例子将在x1节点的下一个节点前面插入一个新的节点

还可为:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,oTest.childNodes[0]);  
</script>

  这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。

  从这几个例子中得出:

  appendChild() 方法在节点的子节点列表末添加新的子节点。

  insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

dom模型中相关的属性和方法

属性:

  • nextSibling     返回当前节点的下一个兄弟节点(只读)
  • previousSibling     返回此节点的前一个兄弟节点(只读)
  • parentNode     返回父节点(只读)
  • childNodes 存储节点的子节点列表(只读)
  • nodeValue     返回节点的文本(可读写)
  • Text     返回此节点及其后代的文本内容(可读写)
  • nodeName     返回节点的名字(只读)
  • Attributes     存储节点的属性列表(只读)
  • dataType     返回此节点的数据类型
  • Definition     以DTD或XML模式给出的节点的定义(只读)
  • Doctype     指定文档类型节点(只读)
  • documentElement     返回文档的根元素(可读写)
  • firstChild     返回当前节点的第一个子节点(只读)
  • Implementation     返回XMLDOMImplementation对象
  • lastChild     返回当前节点最后一个子节点(只读)
  • nodeType     返回节点的类型(只读)
  • nodeTypedValue     存储节点值(可读写)
  • ownerDocument     返回包含此节点的根文档(只读)
  • Parsed     返回此节点及其子节点是否已经被解析(只读)
  • Prefix     返回名称空间前缀(只读)
  • preserveWhiteSpace     指定是否保留空白(可读写)
  • url     返回最近载入的XML文档的URL(只读)
  • Xml     返回节点及其后代的XML表示(只读)

方法:

  • getElementsByTagName     返回指定名字的元素集合
  • appendChild     为当前节点添加一个新的子节点,放在最后的子节点后
  • createElement     创建一个元素节点
  • createTextNode     创建包括给定数据的文本节点
  • removeChild     从子结点列表中删除指定的子节点
  • hasChildNodes     返回当前节点是否有子节点
  • cloneNode     返回当前节点的拷贝
  • createAttribute     创建新的属性
  • createCDATASection     创建包括给定数据的CDATA段
  • createComment     创建一个注释节点
  • createDocumentFragment     创建DocumentFragment对象
  • createEntityReference     创建EntityReference对象
  • createNode     创建给定类型,名字和命名空间的节点
  • createPorcessingInstruction     创建操作指令节点
  • insertBefore     在指定节点前插入子节点
  • Load     导入指定位置的XML文档
  • loadXML     导入指定字符串的XML文档
  • replaceChild     从子节点列表中替换指定的子节点
  • Save     把XML文件存到指定节点
  • selectNodes     对节点进行指定的匹配,并返回匹配节点列表
  • selectSingleNode     对节点进行指定的匹配,并返回第一个匹配节点
  • transformNode     使用指定的样式表对节点及其后代进行转换
  • transformNodeToObject     使用指定的样式表将节点及其后代转换为对象
时间: 2024-08-10 16:26:04

dom 文档对象模型 有关的知识的相关文章

DOM 文档对象模型+倒计时

DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号来表明家庭成员之间的关系. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够

DOM文档对象模型 | Javascript

# 在学过python这样的面向对象编程语言之后,可以用其思维方式来学习Javascript; # DOM文档对象模型就相当于一个包,或者模块,定义了许多类,对网页做操作; # Document类型 # document对象时HTMLDocument的一个实例; # 1.两种访问子节点的快捷方式: # ①documentElement # var html = document.documentElement直接取得<html>的引用; # ②childNodes列表访问文档元素 # 附:do

JavaScript(三、DOM文档对象模型)

一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式." W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对

JavaScript学习笔记——5.DOM(文档对象模型)

1.获得对象方式 方法一 document.getElementsByTagName("div"); document.getElementById("head"); document.getElementsByName("username"); 方法二 //通过数组 document.all //存在为IE,不存在为FF document.body document.forms document.images document.links 2.

XML简明教程——文档对象模型——DOM和SAX(一)

概述 SAX是基于事件解析XML文档的代表性技术.SAX通过扫描XML文档的内容,对元素,属性和文本数据内容等逐一分析和处理. 1.XML基于时间的解析模式 基于事件的解析是指XML处理程序线性描述一个XML文档,当XML处理出鞥许从文档的开头至结尾读取XML文档的过程中,逐一分析和处理遇到的元素.属性和字符数据等. [例子1]奥运金牌榜XML文件: <?xml version = "1.0" encoding = "UTF-8"?> <?xml-

JavaScript笔记03——文档对象模型(Document Object Model,简称DOM)

Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.[1] DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现. 通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.改变或重排页面上的项目. 要改变页面的某个东西,J

JS DOM(文档对象模型)与BOM(浏览器对象模型)

在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理.BOM不要包括浏览器相关的一些属性和方法. DOM知识点1.改变页面的元素和属性a.获取元素的方法:document.getElementById()document.getElementsByTagName()document.getEleme

DOM(文档对象模型)改变HTML

声明:因本人近期对前端尤其的感兴趣,故一直在自学.而最近这几天处于初学期,估计前端的门槛都还没踩到,这会仅是对学习过程的一个记录,如有错误,请指出.万一你不幸被我误导了,勿怪勿怪,我也不是故意的. DOM(文档对象模型)改变HTML (1)查找HTML元素的常用方法: ①  id: var x=document.getElementById("intro");  ②  元素标签的名字: var x=document.getElementById("main"); v

DOM(文档对象模型)

1.定义: DOM是Document Object Model文档对象模型的缩写.是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 例如:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节点移动到第一个节点上面去呢? DOM就是定义了如果做类似操作,那么应该怎么做的标准.比如用getElementById来访问节点,用insertBefore来插入节点. 当浏览器载入HTML时,会生成相应的DOM树. 简而言之,DOM可以理解为一个访问或操作HTML各种标签的