Javascript详解一
来源：互联网 发布：考勤机数据实时更新 编辑：程序博客网 时间：2024/06/06 12:27
DOM：简介
Document Object Model(文本对象模型)
D：文档 – html 文档 或 xml 文档
O：对象 – document 对象的属性和方法
M：模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点（node）的层次。
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
DOM树结构及范例
范例
节点及其类型
节点（node）：来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合。
由DOM树可见，节点分为三种：元素节点（标签），属性节点和文本节点。
元素节点(nodeType==1)
如果把web文档比作一座大厦，元素就是大厦的砖块，这些元素在文档中的布局形成了文档的结构。标签的名字就是元素的名字，文本段落元素的名字P，无序清单元素的名字是ul，列表项元素的名字是li。 
文本节点(nodeType==3)
其实就是包含在元素节点之间的内容。
属性节点(nodeType==2)
用来对元素做出更具体的描述。如<p title="hello"></p>中的title就是属性节点。
请看下面的 HTML 片段：
<html> <head> <title>DOM教程</title> </head> <body> <h1>DOM 第一课</h1> <p>Hello world!</p> </body></html>从上面的 HTML 中： <html> 节点没有父节点；它是根节点 <head> 和 <body> 的父节点是 <html> 节点
文本节点 “Hello world!” 的父节点是 <p> 节点
并且： <html> 节点拥有两个子节点：<head> 和 <body> <head> 节点拥有一个子节点：<title> 节点 <title> 节点也拥有一个子节点：文本节点<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
并且： <head> 元素是 <html> 元素的首个子节点 <body> 元素是 <html> 元素的最后一个子节点 <h1> 元素是 <body> 元素的首个子节点 <p> 元素是 <body> 元素的最后一个子节点
节点属性
nodeName，nodeValue，nodeType
.
节点关系
html中文档编写 js 代码位置
1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成,
获取不到指定的节点:
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> var cityNode = document.getElementById("city"); //打印结果为 null. alert(cityNode); </script> </head> <body> ......2). 可以在整个 html 文档的最后编写类似代码,这样也可以获取所有节点 但这不符合习惯。
3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ var cityNode = document.getElementById("city"); alert(cityNode); }; </script> </head> <body> ......基本属性与document的主要实现方法
- 属性
nodeName：返回节点的名称，依据其类型。
nodeType：返回节点的类型。
attributes：返回元素的属性。
childNodes：返回元素的子节点的 NodeList。
firstChild：返回元素的首个子节点。
lastChild：返回元素的最后一个子节点。
parentNode：返回元素的父节点。
nextSibling：返回元素之后紧跟的节点。
previousSibling：返回元素之前紧随的节点。
textContent：设置或返回元素及其后代的文本内容。
innerTest：设置或返回元素后代的文本内容。
innerHTML：设置或返回元素后代的内容。[HTML DOM] - 方法
hasAttribute(name)：返回元素是否拥有指定的属性。
hasAttributes()：返回元素是否拥有属性。
hasChildNodes()：返回元素是否拥有子节点。
createAttribute(node)：创建属性节点。
createElement(node)：创建元素节点。
createTextNode(node)：创建文本节点。
appendChild(node)：向节点的子节点列表末尾添加新的子节点。
cloneNode(include_all:true,false)：克隆节点。
removeAttribute(name)：删除指定的属性。
removeChild(node)：删除子节点。
replaceNode(newNode)：替换节点。[仅IE]
replaceChild(newNode, oldNode)：替换子节点。
getElementById(id)：找到具有指定id的子孙元素。[HTML DOM]
getElementsByName(name)：找到具有指定name的子孙元素。[HTML DOM]
getElementsByTagName(name)：找到具有指定标签名的子孙元素。
getAttribute(name)：返回属性的值。
setAttribute()：添加新属性。
获取节点的方法
1). document.getElementById: 根据 id 属性获取对应的单个节点
2). document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
3). document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,
但 ie 的实现方式和 W3C 标准有差别:
在 html 文档中若某节点(li)没有 name 属性,
则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
4). 其它的两个方法, ie 根本就不支持, 所以不建议使用
实例代码
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript"> //获取指定元素节点 window.onload = function() { //1.获取id为bj的那个节点 //在编写HTML文档时，需确保id属性是唯一的 //该方法为document对象的方法 var bjNode = document.getElementById("bj"); alert(bjNode); //2.获取所有的li节点 //使用标签名来获取指定节点的集合 //该方法为Node接口的方法，即任何一个节点都有这个方法 var liNode = document.getElementsByTagName("li"); alert(liNode.length); //9 var cityNode = document.getElementById('city'); var liNode = cityNode.getElementsByTagName("li"); alert(liNode.length); //5 //3.根据HTML文档的name属性来获取指定节点的集合 var genderNode = document.getElementsByName("gender"); alert(genderNode.length); //2 //若HTML元素没有定义name属性，则getElementsByName（）对于 //IE无效，所以使用该方法时需谨慎 var bjNode2 = document.getElementsByName("BeiJing"); alert(bjNode2.length); //1 }</script></head><body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br> <br> gender: <input type="radio" name="gender" value="male" />Male <input type="radio" name="gender" value="female" />Female</body></html>获取属性节点:
1). 可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
2). 通过元素节点的 getAttributeNode 方法来获取属性节点,
然后在通过 nodeValue 来读写属性值
代码示例：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript"> //读写属性节点 window.onload = function() { //属性节点即为某一指定的元素节点的属性 //1.先获取指定的那个元素节点 var nameNode = document.getElementById("name"); //2.再读取指定属性的值 alert(nameNode.value); //3.设置指定属性的值 nameNode.value = "周陆宁"; }</script></head><body> name :<input type="text" name="username" id="name" value="1233"/> </body></html>获取元素节点的子节点(只有元素节点才有子节点):
1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
2). firstChild 属性获取第一个子节点
3). lastChild 属性获取最后一个子节点
代码示例：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript"> //获取元素节点的子节点 window.onload = function() { //1.获取city节点的所有子节点 var cityNode = document.getElementById("city"); //2.利用元素节点的childNodes方法可以获取指定节点的所有节点(li节点和文本节点) //但该方法不实用 alert(cityNode.childNodes.length); //3.获取city节点的所有li节点 var cityNodes = cityNode.getElementsByTagName("li"); alert(cityNodes.length); //4.获取指定节点的第一个子节点和最后一个子节点 alert(cityNode.firstChild); alert(cityNode.lastChild); }</script></head><body> <p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> </body></html>操作文本节点:
1). 步骤: 元素节点 –> 获取元素节点的子节点
2). 若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值。
代码示例：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript"> //获取文本节点 window.onload = function() { //前提：文本节点一定是元素节点的子节点 //1.获取文本节点所在的文本节点 var bjNode = document.getElementById("bj"); //2.通过firstChild定义到文本节点 var bjTextNode = bjNode.firstChild; alert(bjTextNode); //返回[object Text] //3.通过操作文本节点的nodeValue属性来读写文本节点的值 alert(bjTextNode.nodeValue); //返回北京 bjTextNode.nodeValue = "美国"; alert(bjTextNode.nodeValue); //返回美国 }</script></head><body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul></body></html> 节点的属性:
1). nodeName: 代表当前节点的名字. 只读属性.
如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
2). nodeType：返回一个整数, 这个数值代表着给定节点的类型.
只读属性. 1 – 元素节点, 2 – 属性节点, 3 – 文本节点
3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性
①. 元素节点, 返回值是 null.
②. 属性节点: 返回值是这个属性的值
③. 文本节点: 返回值是这个文本节点的内容
代码示例：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript"> //关于节点的属性nodeType,nodeValue,nodeName //在文档中，任何一个节点都有这三个属性 //而id,name,type是具体节点的属性 window.onload = function() { //1.元素节点的这三个属性 var bjNode = document.getElementById("bj"); alert(bjNode.nodeType); //返回1，表示为元素节点 alert(bjNode.nodeName); //返回Li，表示节点名 alert(bjNode.nodeValue);//返回null,元素节点没有nodeValue值 //2.属性节点的这三个属性 var nameAttr = document.getElementById("name") .getAttributeNode("name"); alert(nameAttr.nodeType); //返回2，表示为属性节点 alert(nameAttr.nodeName); //返回name，表示节点名 alert(nameAttr.nodeValue);//返回username //3.文本节点的这三个属性 //var liNodes = document.getElementsByTagName("li"); var textNode = bjNodes[1].firstChild; var textNode = liNode.firstChild; alert(textNode.nodeType); //返回3，表示为文本节点 alert(textNode.nodeName); //返回#text alert(textNode.nodeValue);//返回北京 }</script></head><body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing" >北京</li> <li>北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> name1:<input type="text" name="username" id="name" value="1233"/></body></html>创建元素节点和文本节点
- 创建一个元素节点:
1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
- 创建一个文本节点:
1). createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.
方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
- 为元素节点添加子节点
1). appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.
代码示例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //新创建一个元素节点，并把该节点添加为文档中指定节点的子节点 window.onload = function(){ //1.新创建一个元素节点，返回值为指向元素节点的引用 var liNode = document.createElement("li"); //<li></li> //2.创建“厦门”的文本节点，返回该文本节点是引用 var textNode = document.createTextNode("厦门"); liNode.appendChild(textNode);//<li>厦门</li> var cityNode = document.getElementById("city"); //3.新添加newChild子节点，该子节点将作为elementNode的最后一个子节点 cityNode.appendChild(liNode); } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </body></html> - JavaScript继承详解(一)
- JavaScript继承详解 (一)
- JavaScript详解<一>
- Javascript详解一
- JavaScript继承详解（一）
- JavaScript继承详解（一）
- JavaScript继承详解（一）
- JavaScript继承详解（一）
- JavaScript 各种参数 详解(一)
- JavaScript继承详解（一）
- JavaScript语法详解（一）
- JavaScript继承详解（一）
- JavaScript继承详解（一）
- JavaScript继承详解（一）
- Javascript prototype详解（一）
- 【JavaScript脚本编程技术详解-----（一）】
- javascript继承详解（一）：前世今生
- javascript之继承详解（一）
- apple开发者文档关于KVC和KVO文档的一些渣翻——这里是原地址
- Java反射机制
- Python爬虫（一）热身
- Setting卸载SD卡，可以格式化，卸载过程中还可以卸载问题
- mac安装redis详细步骤
- Javascript详解一
- 把异常转换为字符串
- android消息处理机制原理解析
- 基于STM32和SIM900A的无线通信模块设计
- CentOS升级内核教程
- HDU-1020
- java中equals与==的区别
- css postion 理解 absolute 和fixed的区别
- 树莓派3B 内核编译
