JavaScript总结（五）
详解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总结（五）的更多相关文章
- javascript中五种基本数据类型
前言: JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined.null.bolean.number.string:另外还含有一种复杂的数据类型:object. 深入 ...
- ASP.NET,C#后台调用前台javascript的五种方法
C#后台调用前台javascript的五种方法 由于项目需要,用到其他项目组用VC开发的组件,在web后台代码无法访问这个组件,所以只好通过后台调用前台的javascript,从而操作这个组件.在网上 ...
- JavaScript中五种常见运算符
一. in运算符 in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望它的右操作数是一个对象.如果右侧的对象拥有一个名为左操作数值的属性名,那么表达式返回true.例如: var point ...
- 【JavaScript的五种基本数据类型及转换】
js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Null,Undefined),和一种混合数据类型就是特殊的(Object). "undefined& ...
- C#后台调用前台javascript的五种方法小结
第一种,OnClientClick (vs2003不支持这个方法) <asp:Button ID="Button1" runat="server" Tex ...
- 【转】 C#后台调用前台javascript的五种方法
第一种,OnClientClick (vs2003不支持这个方法)<asp:ButtonID="Button1" runat="server" Te ...
- javascript学习五---OOP
面向对象:JavaScript的所有数据都可以看成对象 JavaScript的面向对象编程和大多数其他语言如Java.C#的面向对象编程都不太一样.如果你熟悉Java或C#,很好,你一定明白面向对象的 ...
- JavaScript（五）——插入地图
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- javascript继承(五)—prototype最优两种继承（空函数和循环拷贝）
一.利用空函数实现继承 参考了文章javascript继承—prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...
- JavaScript案例五：下拉列表左右选择
用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...
随机推荐
- Sublime Text 的使用笔记
Sublime Text 是一个代码编辑器(Sublime Text 2,3是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器.Sublime Text是由程序员Jon Skinner ...
- 查看windows所有exe的启动参数。
在cmd中输入 wmicprocess 即可查看到所有进程的启动参数和运行参数.
- unbind() 移除事件内处理方法
实例: 移除所有 p 元素的事件处理器: $("button").click(function(){ $("p").unbind(); }); 定义和用法: u ...
- 将CAGradientLayer用作maskView的遮罩图层
将CAGradientLayer用作maskView的遮罩图层 说明 CAGradientLayer可以用作alpha遮罩,供maskView使用,这两种东西都是非常偏门的东西,但是,偏门不代表功能不 ...
- 使用FBTweak
使用FBTweak https://github.com/facebook/Tweaks FBTweak是Facebook的一款开源库,用于微调数据而无需我们重复编译跑真机用的,它支持4种类型的cel ...
- PowerShell管理SCOM_批量设置维护模式（下）
#定义存储需要置为维护模式的计算机名称列表$serverlist = "C:\scomm\servers.txt"#定义RMS服务器名称$rmsServerName=”scomw. ...
- Office 365实现单点登录系列(5)—配置单点登录
这是单点登录系列的最后一篇文章,前面4篇文章其实都是在为这篇文章的内容做准备,我把这四篇文章的链接放在下面,如果大家有需要,可以参考我以下的链接: Office 365实现单点登录系列(1)—域环境搭 ...
- mysqlDOS命令
MySQL : 1.安装mysql服务:mysqld install 2.删除mysql服务:sc delete mysql 3.启动mysql服务:net start mysql 4.初始化设置密码 ...
- Asp.net Core 2.0+EntityFrameWorkCore 2.0添加数据迁移
Asp.net Core 由于依赖注入的广泛使用,配置数据迁移,与Asp.net大不相同,本篇介绍一下Asp.net Core添加数据迁移的过程 添加Nuget包 Install-Package Mi ...
- Fix for: Permission denied to access property 'toString'
Originally posted by rwolffgang here. Hi guys,when developing a game that runs in an iframe (Faceboo ...