详解DOM（文档对象模型(Docment Object Model)）

✍  DOM中定义了许多节点类型来表示节点的多个方面：

文档节点Document

最顶层的节点(跟节点)，代表整个HTML文档，所有的其它节点都是附属它的。每个web文档都有一个文档节点

文档类型节点DocumentType

<!DOCTYPE>元素用于声明一个页面的文档类型定义(Document Type Declaration,即DTD)。此元素声明位于文档中的最前面的位置，处于<html>标签之前。通过确认页面的DTD，可以同时确定页面使用哪种W3C规范(比如HTML或XHTML规范)。☒

文档片段节点DocumentFragment

程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上，对这批子元素的操作不需要一个真正的根节点

元素节点Element

在HTML DOM中，Element对象表示HTML元素。可以拥有类型为元素节点、文本节点、注释节点的子节点。

文本节点Text

代表XHTML文档中元素的起始标记和结束标记之间，或者CDataSection内包含的普通文本。☒

属性节点Attr

代表元素节点开始标记内指定的属性。☒

CDataSection节点

CDataSection接口是Text接口的子接口，没有定义任何自己的属性和方法。通过从 Node接口继承nodeValue属性，或通过从 CharacterData接口继承data属性，可以访问CDataSection的文本内容。☒

注释节点Comment

代表注释。☒

（PS:☒表示该节点类型不能包含子节点）

✍  节点含有的方法

方法

描述

appendChild()

把新的子节点添加到指定节点

removeChild()

删除子节点

replaceChild()

替换子节点

insertBefore()

在指定的子节点前面插入新的子节点

createAttribute()

创建属性节点

createElement()

创建元素节点

createTextNode()

创建文本节点

getAttribute()

返回指定的属性值

setAttribute()

把指定属性设置或修改为指定的值

✍ 节点含有的属性

属性

描述

InnerHTML

获取元素内容的最简单方法是使用innerHTML属性

NodeName

属性规定的节点名称。

➣ nodeName是只读的

➣ 元素节点的nodeName与标签名相同

➣ 属性节点的nodeName与属性名相同

➣ 文本节点的nodeName始终是#text

➣ 文档节点的nodeName始终是#document

nodeValue

nodeValue 属性规定节点的值。

➣ 元素节点的nodeValue是undefined或null

➣ 文本节点的nodeValue是文本本身

➣ 属性节点的nodeValue是属性值

nodeType

nodeType 属性返回节点的类型。

➣ nodeType 是只读的

previousSibling

指向前一个兄弟节点；该节点为第一个节点时返回null

nextSibling

指向后一个兄弟节点；该节点为最后一个节点时返回null

firstChild

指向在childNodes列表中的第一个子节点

lastChild

指向在childNodes列表中的最后一个子节点

ownerDocument

指向这个节点所属的文档

✍ 如何处理元素属性？

即便节点对象已经具有attributes方法，且已被所有类型的节点继承，然而，只有元素节点才能有特性。元素节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法，包括：

➣ getNamedItem(name)——返回nodeName属性值等于name的节点；

➣ removeNamedItem(name)——删除nodeName属性值等于name的节点；

➣ setNamedItem(node)——讲node添加到列表中，按其nodeName属性进行索引；

➣ item(pos)——像NodeList一样，返回在位置pos的节点；

（PS：这些方法都是返回一个Attr节点，而非特性值。）

✍ 怎么实现对节点的创建和操作？

➣ 对节点的创建

createElement(tagName)——创建标记名为tagName的元素；

var div = doucment.createElement('div'); //这样就创建了一个div元素

createTextNode(text)——创建包含文本的text的文本节点；

 var text = doucment.createTextNode('Hello World'); //这样就创建了一个文本节点

➣ 对节点的添加

appendChild(node)——把节点node添加到元素中；

 div.appendChild(text) //text文本节点被添加到div元素尾;

insertBefore(newNode,oldNode)——在元素中的oldNode节点前添加新的newNode节点；

div.insertBefore(newNode,oldNode) //在div元素中的oldNode节点前添加新的newNode节点

➣ 对节点的删除

removeChild(node)——删除元素中的node子节点；

 div.removeChild(text); //删除div元素中的text子节点

➣ 对节点的替换

replaceChild(newNode,oldNode)——在元素中的oldNode节点替换为新的newNode节点;

 div.replaceChild(newNode,oldNode); //在div元素中的oldNode节点替换为了newNode节点

➣ 创建文档碎片

createDocumentFragment()——每一次添加节点都会对页面进行渲染一次，这样进程就上，然后再一次性的添加到元素中；

➣ 节点克隆

cloneNode(deep)——复制指定节点，deep默认值为false，如果deep值为false，则克隆节点本身，如果值为true，则克隆该节点本身及其后代所有子节点。

➣ innerHTML

设置或返回行的开始标签和结束标签之间的 HTML。

✍ 对文本节点进行操作

DOM中定义的方法对文本节点进行操作

➣ appendData(String)——将字符串添加在文本节点的文本尾部；

➣ deleteData(offset,count)——删除文本节点中从指定位置开始的指定数量的字符；

➣ insertData(offset,string)——将指定字符串插入到文本节点指定的位置中；

➣ replaceData(offset,count,string)——用给定的字符串代替文本节点指定位置指定数量的文本数据；

➣ splitText(offset)——将指定位置的文本节点分成两个部分，将右边的部分返回为一个新的文本节点，将左边的部分留在元素位置；

<p id="txt">这是前面这是后面</p>

<script>

    var txt = document.getElementById("txt").childNodes[0];

    var y = txt.splitText(4);

    document.write("新文本节点:"+txt.nodeValue+"====");

    document.write("原文本节点:"+y.nodeValue);

</script>
//输出结果为:新文本节点:这是前面====原文本节点:这是后面

➣ substringData(offset,count)——从文本节点的文本数据中返回指定位置指定数目的字符串；

✍ 对table对象进行操作

➣ Table 对象集合

集合

描述

cells[]

返回包含表格中所有单元格的一个数组

rows[]

返回包含表格中所有行的一个数组

tBodies[]

返回包含表格中所有tbody的一个数组

➣ Table 对象属性

属性

描述

border

设置或返回表格边框的宽度

caption

对表格的<caption>元素的引用

cellPadding

设置或返回单元格内容和单元格边框之间的空白量

cellSpacing

设置或返回在表格中的单元格之间的空白量

frame

设置或返回表格的外部边框

id

设置或返回表格的id

rules

设置或返回表格的内部边框（行线）

summary

设置或返回对表格的描述（概述）

tFoot

返回表格的TFoot对象。如果不存在该元素，则为null

tHead

返回表格的THead对象。如果不存在该元素，则为null

width

设置或返回表格的宽度

➣ 标准属性

属性

描述

className

设置或返回元素的class属性

dir

设置或返回文本的方向

lang

设置或返回元素的语言代码

title

设置或返回元素的title属性

➣ Table 对象方法

方法

描述

createCaption()

用于在表格中获取或创建<caption>元素

createTFoot()

用于在表格中获取或创建<tfoot>元素

createTHead()

用于在表格中获取或创建<tHead>元素

deleteCaption()

从表格删除caption元素以及其内容

deleteRow()

用于从表格删除指定位置的行

deleteTFoot()

从表格删除tFoot元素及其内容

deleteTHead()

从表格删除tHead元素及其内容

insertRow()

用于在表格中的指定位置插入一个新行

JavaScript总结（五）的更多相关文章

  1. javascript中五种基本数据类型

    前言: JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined.null.bolean.number.string:另外还含有一种复杂的数据类型:object. 深入 ...

  2. ASP.NET,C#后台调用前台javascript的五种方法

    C#后台调用前台javascript的五种方法 由于项目需要,用到其他项目组用VC开发的组件,在web后台代码无法访问这个组件,所以只好通过后台调用前台的javascript,从而操作这个组件.在网上 ...

  3. JavaScript中五种常见运算符

    一. in运算符 in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望它的右操作数是一个对象.如果右侧的对象拥有一个名为左操作数值的属性名,那么表达式返回true.例如: var point ...

  4. 【JavaScript的五种基本数据类型及转换】

    js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Null,Undefined),和一种混合数据类型就是特殊的(Object). "undefined& ...

  5. C#后台调用前台javascript的五种方法小结

    第一种,OnClientClick (vs2003不支持这个方法) <asp:Button ID="Button1" runat="server" Tex ...

  6. 【转】 C#后台调用前台javascript的五种方法

    第一种,OnClientClick    (vs2003不支持这个方法)<asp:ButtonID="Button1" runat="server" Te ...

  7. javascript学习五---OOP

    面向对象:JavaScript的所有数据都可以看成对象 JavaScript的面向对象编程和大多数其他语言如Java.C#的面向对象编程都不太一样.如果你熟悉Java或C#,很好,你一定明白面向对象的 ...

  8. JavaScript（五）——插入地图

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  9. javascript继承(五)—prototype最优两种继承（空函数和循环拷贝）

    一.利用空函数实现继承 参考了文章javascript继承—prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...

  10. JavaScript案例五：下拉列表左右选择

    用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...

随机推荐

  1. leetCode题解之删除单链表中指定的元素

    1.问题描述 Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> ...

  2. Vue2学习笔记:实例

    1.实例 <!DOCTYPE html> <html> <head> <title></title> <script src=&quo ...

  3. Ubuntu安装 和 python开发

    在ubuntu上安装pycharm 可以好几种下载办法 1.pycharm之linux版本下载地址: https://download.jetbrains.8686c.com/python/pycha ...

  4. Ardunio控制RGB的LED灯显示彩虹渐变色.

    由于我使用的是共阴极的RGB LED,如果你的是共阳极的,接线的时候要注意一下. 其他没什么不同 //定义RGB色彩的输出I/O ; ; ; //标记颜色变化的方式,增加值还是减小值 bool red ...

  5. 列表 ->join---> 字符串 转类型:x--->y类型 y(x)

    列表     ->join--->           字符串 转类型:x--->y类型        y(x)

  6. codeforces 432E Square Tiling

    codeforces 432E Square Tiling 题意 题解 代码 #include<bits/stdc++.h> using namespace std; #define fi ...

  7. 浅析JS中的堆内存与栈内存

    最近跟着组里的大佬面试碰到这么一个问题, Q:说说var.let.const的区别 A:balabalabalabla... Q:const定义的值能改么? A:你逗我?不能吧 不知道各位看官怎么想? ...

  8. 基于easyui开发Web版Activiti流程定制器详解（四）——页面结构（下）

    题外话: 这两天周末在家陪老婆和儿子没上来更新请大家见谅!上一篇介绍了调色板和画布区的页面结构,这篇讲解一下属性区的结构也是定制器最重要的一个页面. 属性区整体页面结构如图:  在这个区域可以定义工作 ...

  9. struts2中的文件上传和下载

    天下大事,必做于细.天下难事,必作于易. 以前见过某些人,基础的知识还不扎实就去学习更难的事,这样必定在学习新的知识会非常迷惑结果 再回来又一次学习一下没有搞懂的知识,这必定会导致学习效率的下降!我写 ...

  10. 20155314 2016-2017-2 《Java程序设计》实验二 Java面向对象程序设计

    20155314 2016-2017-2 <Java程序设计>实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UM ...