JavaScript DOM(一)
文件夹:
- DOM家谱树
- 节点的基本属性和方法
- document与getElement方法
DOM家谱树
DOM能够将不论什么HTML或XML文档描绘成一个由多层次节点构成的结构。当中节点被分为几种不同的类型。每种类型表示文档中不同的信息或标记。每个节点又拥有各自的属性和方法,同一时候和其它节点存在着某种关系。
DOM将文档描写叙述的层次结构能够表示为一种”树型”模型,更确切地说,是一种家谱树。
它使用parent,child,sibling等称号来表明家族成员之间的关系。
为了理解DOM描写叙述的层次结构我们最好还是举例来说明:
<!DOCTYPE html>
<html><head><meta charset="gb2312" /><title>Fruit</title></head><body><h2>Nice Fruit</h2><p title="A list of fruit">Eat them usually.</p><ul id="list1"><li class="fruit">Apple</li><li class="fruit">Watermelon</li><li class="fruit">Pear</li><li class="fruit">Orange</li></ul></body>
</html>
以上的文档模型就能够用下面的家谱树来表示:
显然在这个家谱树中html是根元素。
html有2个child,各自是head和body。它们二者都是根元素的子节点。同一时候又互为兄弟节点。html就是它们的父节点。
继续向下,我们能够看到body有3个子节点。分别为h2。p。ul,这三者互为兄弟节点,它们有共同的父节点body。同一时候ul又是4个li节点的父节点。
body的兄弟节点head拥有2个子节点:meta和title。
节点的基本属性和方法
JavaScript中,节点有12中类型:
- Node.ELEMENT_NODE
- Node.ATTRIBUTE_NODE
- Node.TEXT_NODE
- Node.CDATA_SECTION_NODE
- Node.ENTITY_REFERENCE_NODE
- Node.ENTITY_NODE
- Node.PROCESSING_INSTRUCTION_NODE
- Node.COMMENT_NODE
- Node.DOCUMENT_NODE
- Node.DOCUMENT_TYPE_NODE
- Node.DOCUMENT_FRAGMENT_NODE
- Node.NOTATION_NODE
以上12中类型。分别相应1~12数值常量。不论什么节点,必属当中之中的一个。
其实。全部类型的节点都实现了Node接口。
在JavaScript中,也就是继承了Node类型。因此全部节点都有拥有共同的基本属性和方法。
节点的基本属性
节点操作的基本方法
节点的基本属性
1、nodeType、nodeName及nodeValue属性
全部的节点类型都属于以上12种类型之中的一个。节点中的nodeType属性就存储着节点的类型值。
比方html,body,p等元素类型的节点,他们的类型都属于Node.ELEMENT_NODE。相应着数值1。
nodeName以及nodeValue中包括着很多其它有关节点的信息,它们取决于详细的节点类型。比方对于元素类型(Node.ELEMENT_NODE)的节点,nodeName表示元素的标签名(如:body,ul,p),nodeValue为null。对于文档类型(Node.DOCUMENT_NODE),nodeName为”#document”。nodeValue为null。
2、childNodes属性
文档中的节点之间通过parent,child,sibling等来描写叙述彼此之间的关系。每个节点都拥有一个childNodes属性,该属性中存放着一个NodeList对象。
NodeList是一种相似数组的对象,专门用于保存一组有序的节点。我们能够通过下面方式来訪问当中的节点:
方括号:someNode.childNodes[i]
item():someNode.childNodes.item(i)
NodeList对象是具有length属性的,该属性值表示当中保存的节点数量:
someNode.childNodes.length
须要强调的是,NodeList对象是基于Dom结构动态查询的结果,因此。当Dom结构发生变化时。该对象会随之变化。
因此下面代码会产生死循环:
var divs = document.getElementsByTagName("div"), i, div;
for (i = 0; i < divs.length; i ++) {div = document.createElement("div");document.body.appendChild(div);
}
3、parentNode属性
每个节点都拥有一个parentNode属性,该属性指向该节点的父节点。
假设该节点没有父节点,这个值为null。
4、firstChild和lastChild属性
顾名思义。对于一个父节点。这两个属性分别指向第一个子节点和最后一个子节点。假设该节点没有子节点,那么这两个值均为null。假设仅仅有一个子节点,这两个值相等。
5、previousSibling和nextSibling属性
父节点的childNodes属性指向一个NodeList对象,当中保存着一组有序节点。
这些节点互为兄弟节点。他们之间能够通过previousSibling和nextSibling属性来互相訪问。
previousSibling属性指向本节点的前一个节点,假设该节点本身为第一个节点。那么这个值为null。nextSibling属性相似,它指向本节点的下一个相邻节点,假设该节点为最后一个节点,那么这个值为null。
6、ownerDocument
该属性相同为全部节点共同拥有,指向表示整个文档的文档节点。该属性同一时候也表示了不论什么节点都必定属于其所在的文档。同一时候也唯一属于该文档。这个属性给我们带来了回溯的便利。我们能够直接跳到文档的顶部而不须要在结构层中层层回溯。
对于以上几种表示节点关系的属性,我们能够用下面图片来表示:
节点操作的基本方法
1、appendChild()
该方法用于向childNodes列表的末尾加入一个节点,并返回这个节点。
注意每次。加入完毕,DOM结构都会动态更新。
var node1 = someNode.appendChild(newNode);
alert(node1 == newNode); //true
alert(someNode.lastChild == node1) //true
2、insertBefore()
该方法会将节点插入到指定节点的前面。
该方法接收2个參数:要插入的节点,參照节点。
比如:
var node = someNode.insertBefore(newNode, someNode.firstChild); //插入到第一个节点之前var node = someNode.insertBefore(newNode, someNode.lastChild); //插入到最后一个节点之前var len = someNode.childNodes.length;var node = someNode.insertBefore(newNode, someNode.childNodes[len - 2]); //插入到倒数第二个节点之前
3、replaceChild()
该方法用于替换某子节点。
该方法相同接收2个參数:要插入的节点。被替换的节点。
比如:
var len = someNode.childNodes.length;var node = someNode.replaceChild(newNode, someNode.childNodes[len - 4]); //替换倒数第四个节点
4、removeChild()
该方法用于从DOM结构中移出某子节点,该方法仅仅接受一个參数:须要被移出的节点。须要注意的是。调用该方法移出的节点会依旧存在于文档之中,仅仅只是已经不存在于文档的层次结构中了。
5、cloneNode()
该方法存在于全部的节点中。接受一个布尔型參数。用于对本节点进行克隆。克隆分为2种:深复制、浅复制。
深复制返回的结果为本节点以及本节点包括的全部子节点树。
浅复制返回的结果仅仅为当前节点的一个副本。不论深复制还是浅复制。复制后返回的副本同被removeChild()方法移出的节点一样。存在于文档中,可是在DOM树中没有它的位置。我们能够通过上面的节点操作方法将其加入到节点树中。
var nodeTree = someNode.cloneNode(true); //參数为true时表示深复制var node = someNode.cloneNode(false); //參数为false时表示浅复制
6、hasChildNodes()
该方法会去检測节点是否包括子节点,包括时返回true,否则返回false。因为NodeList的动态性,我们在訪问childNodes的length属性的时候,会运行一次对其全部元素的查询,从这个意义上说。使用hasChildNodes()方法来确认某节点是否包括子节点是一个更简单的方法。
document与getElement方法
在JavaScript中,document对象表示整个html页面。同一时候也是window对象的一个属性,因此我们能够通过全局对象来訪问它。
有关document对象。最经常使用的莫过于其通过getElement方法来获取元素引用的方法了。
我们还是以开头描写叙述家谱树的代码为例:
<!DOCTYPE html>
<html><head><meta charset="gb2312" /><title>Fruit</title></head><body><h2>Nice Fruit</h2><p title="A list of fruit">Eat them usually.</p><ul id="list1"><li class="fruit" name="li1">Apple</li><li class="fruit" name="li2">Watermelon</li><li class="fruit" name="li3">Pear</li><li class="fruit" name="li4">Orange</li></ul></body>
</html>
- getElemetById
- getElementsByTagName
- getElementsByName
- getElementsByClassName
getElemetById
该方法同意我们通过元素的id来获取该元素的引用。该方法接受一个參数:要获取元素的ID值,若不存在该ID相应的元素。返回null。
比如我们要获取以上代码中ul元素的引用。能够使用下面的方法:
var ulList = document.getElementById("list1");
在文档中每个元素都是一个对象类型的引用。因此对于以上代码我们用typeof来检測的时候会得到object:
alert(typeof ulList); //object
getElementsByTagName
非常多时候我们并不会为文档中每个元素都定义一个独一无二的ID,为了获得元素的引用。我们还能够使用getElementsByTagName()方法。
该方法接收一个參数:要获取元素的标签名。该方法会返回一个包括指定标签名的元素的集合。
如:
var myLi = document.getElementsByTagName("li");
这样我们会获得一个全部li元素的引用。在HTML中。该引用是一个HTMLCollection对象的引用,其与NodeList相似,能够通过方括号[]和item()来訪问当中的元素,同一时候其自身也拥有length属性。
alert(myLi.length); //4
alert(myLi[1].name); //li2
alert(mtLi.item(0).name); //li1
同一时候,HTMLCollection对象另一个namedItem()方法,能够使我们通过元素名更加方便地訪问当中的元素:
myLi.namedItem("li2")
当我们使用通配符”*”作为參数的时候,我们将获得整个页面全部元素的引用,在HTMLCollection中,它们依照出现的先后顺序排列。
比如获取以上页面的全部元素的引用:
var all = document.getElementsByTagName("*");
alert(all.length); //12
alert(all[0]); //html
alert(all[1]); //head
alert(all[2]); //meta
getElementsByName
该方法会返回带有给定name特性的全部元素,该方法接受一个參数,要获取元素的name。
要获取指定name的元素的使用方法十分简单:
var fruit1 = document.getElementsByName("li0");
这里,我们另外举一个十分经常使用的样例——用于取得单选button:
<ul><li><input type="radio" value="red" name="color" id="red"><label for="red">Red<lable></li><li><input type="radio" value="white" name="color" id="white"><label for="white">White<lable></li><li><input type="radio" value="black" name="color" id="black"><label for="black">Black<lable></li>
</ui><script>var radios = document.getElemtnByName("color");
</script>
以上代码获得了全部单选button的HTMLCollection对象。须要注意的是,因为该radios中全部元素的name均为color。我们通过namedItem(“color”)方法仅仅会获得当中的第一项。
getElementsByClassName
在HTML5 DOM中新增了getElementsByClassName()方法,该方法接受一个參数,即要获取的元素的类名。
该方法会获得包括指定类名的元素的集合。
如:
var myFruit = document.getElementsByClassName("fruit");
对于某些没有提供对该方法支持的浏览器。我们也能够通过遍历的方法比較easy地给出跨浏览器解决方式:
function getElementByClass(node, className) {if(node.getElementsByClassName) {return node.getElementsByClassName(className);} else {var rets = new Array();var eles = node.getElementByTagName("*");for(var i = 0; i < eles.length; i ++) {if(eles[i].calssName.indexOf(className) != -1) { rets[rets.length] = eles[i]; }}return rets;}
}
转载于:https://www.cnblogs.com/llguanli/p/8445980.html
JavaScript DOM(一)相关推荐
- 六、前端开发-JavaScript DOM
六.前端开发语言体系-JavaScript DOM 文章目录 六.前端开发语言体系-JavaScript DOM JavaScript DOM DOM简介 DOM方法 DOM事件 DOM事件监听器 D ...
- javascript DOM 遍历
javascript DOM 遍历 由 愚人码头 撰写 http://www.css88.com/archives/514 javascript DOM 遍历 以下一系列的辅助函数可以帮助您,他们能取 ...
- javascript DOM(08-21)
1.createElement()和createTextNode() //创建一个li新元素 var newChild=document.createElement('li'); //创建一个a 新元 ...
- html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
- javascript dom追加内容的例子
javascript dom追加内容的例子 javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC & ...
- java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- JavaScript Dom编程艺术
当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...
- html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
- 高性能JavaScript DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和 JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间 ...
- Javascript——DOM编程
Javascript--DOM编程 基本概述 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语 ...
最新文章
- python读文件的解码方式_跳过Python文件读取中的不可解码字符
- JavaScript编码encode和decode escape和unescape
- 从零开始编写自己的C#框架(25)——网站部署
- Java 字符串 String 与整数型 int 之间的转换
- 1030. 完美数列(25)
- java udp 心跳,udp简略通讯示例-心跳示例
- (132)FPGA面试题-Verilog实现格雷码转二进制
- 找不到ffmpeg.dll无法继续执行代码怎么办_2020年,小规模增值税3%减按1%征收,那么一般纳税人该怎么办?...
- 爱普生xp245手动清零_仍在Windows XP上吗? 手动更新或感到烦恼
- mysql中用来取余数的函数是_mysql数学函数有哪些?
- nginx 代理 负载均衡 网站转接的用法
- linux sql server 迁移,SQL Server2008 实例数据迁移步骤
- Win 10 下无法安装.net framework 3.5,错误代码0x800F081F的解决方案
- imac 网络安装系统 服务器时间,Mac 重装系统教程(二):网络在线重装
- java解析excel手机号变成科学计数法形式解决
- Windows10:关于触摸板的驱动不适用的问题
- 爱彼迎招募“周末玩家”,住遍“匠心”民宿系列
- 转: angularjs学习总结(~~很详细的教程)
- gradle-4.6-all.zip、gradle-4.4-all.zip百度云下载
- 数仓中指标-标签,维度-度量,自然键-代理键,数据集市等各名词解析及关系