java权限管理selor_Java进阶学习第四天——DOM入门

文档版本

开发工具

测试平台

工程名字

日期

作者

备注

V1.0

2016.04.14

lutianfei

none

DOM 文档对象模型

文档：标记型文档 (HTML/XML)

对象：封装了属性和行为的实例，可以直接被调用。

模型：所有的标记型文档都具有一些共性特征的一个体现。

DOM解析HTML

通过DOM的方法，把HTML全部元素(标签、文本、属性)都封装成了对象。

文本

span 标签

id 属性

文本

DOM想要操作标记型文档必须先解析。(解析器)

DOM结构模型

* 注：Node节点代表以上4种对象。

DOM的三个级别

DOM level 1：将html文档封装成对象。

DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。

DOM level 3：支持xml1.0的一些新特性。

DHTML

DHTML:动态的HTML，它不是一门语言，是多项技术综合体的简称。

包括html，css，dom，javascript。

这四种语言的职责：

Html：负责提供标签，封装数据，这样便于操作数据。

Css：负责提供样式，对标签中的数据进行样式定义。

Dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。

Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。

BOM和HTML DOM的关系图

NODE 接口的特性和方法

Document 对象

Document常用方法

getElementById(“id的值”); 通过元素的id的属性获取元素(标签)对象。

getElementsByName(“name属性值”); 通过名称获取元素对象的集合(返回数组)

getElementsByTagName(“标签名称”); 通过标签名称获取元素对象的集合(返回数组)

write(“文本的内容(html的标签)”); 把文本内容写到浏览器上。

//alert(input.value);

var inputs = document.getElementsByName("username");

// alert(inputs.length);

for(var i=0;i

var input1 = inputs[i];

// alert(input1.value);

}

var inputs2 = document.getElementsByTagName("input");

// alert(inputs2.length);

添加标签练习

createElement(“元素名称”); 创建元素对象

createTextNode(“文本内容”) 创建文本对象

appendChild(“子节点”) 添加子节点

• 北京
• 上海
• 广州

需求：在ul无序列表下，添加一个子节点。

深圳

*/

// 创建元素对象

var li = document.createElement("li");

// 创建文本的对象

var text = document.createTextNode("深圳");

// 把文本对象添加到元素对象下面，作为子节点

li.appendChild(text);

// 获取ul

var ul = document.getElementsByTagName("ul")[0];

// 把元素对象添加ul的下面，作为子节点

ul.appendChild(li);

Element对象

获取元素对象

getAttribute(“属性名称”); 获取属性的值

setAttribute(“属性名称”,”属性的值”); 设置或者修改属性的值

removeAttribute(“属性名称”); 删除属性

获取元素下的所有子节点(重点)在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合

ul.getElementsByTagName();

• 北京
• 上海
• 广州

// alert(input.value);

// alert(input.getAttribute("value"));

// 修改

//input.setAttribute("value", "zhaosi");

//alert(input.getAttribute("value"));

input.removeAttribute("value");

//alert(input.getAttribute("value"));

// ============================================================================

var ul = document.getElementById("ulId");

var lis = ul.childNodes; //获取的元素中包含了空格

// alert(lis.length);

var lis2 = ul.getElementsByTagName("li");

alert(lis2.length);

Node节点

nodeName 节点名称

如果节点是元素节点，nodeName返回这个元素的名称

如果是属性节点，nodeName返回这个属性的名称

如果是文本节点，nodeName返回一个内容为#text的字符串

nodeType 节点类型

节点类型

编号

说明

Node.ELEMENT_NODE

1

元素节点

Node.ATTRIBUTE_NODE

2

属性节点

Node.TEXT_NODE

3

文本节点

nodeValue 节点的值

如果给定节点是一个属性节点，返回值是这个属性的值

如果给定节点是一个文本节点，返回值是这个文本节点内容

如果给定节点是一个元素节点，返回值是 null

父节点、子节点和同辈节点

父节点： parentNode

parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。

document 节点的没有父节点。

子节点

childNodes：获取指定节点的所有子节点集合。(含空格)

firstChild：获取指定节点的第一个子节点。

lastChild：获取指定节点的最后一个子节点。

同辈节点

nextSibling: 返回一个给定节点的下一个兄弟节点。

previousSibling：返回一个给定节点的上一个兄弟节点。

IE6-8

IE9-11 Chrome FireFox

firstChild 第一个节点

firstElementChild?第一个节点

lastChild最后一个节点

lastElementChild 最后一个节点

nextSibling 下一同级节点

nextElementSibling下一同级节点

previousSibling 上一同级节点

previousElementSibling?上一同级节点

ul 与 span在使用Node节点时的注意事项

如果通过ul获取子节点时，必须使用ul.firstElementChild;

但是如果IE6-8，需要使用firstChild;

使用span的标签获取span中间的文本内容(也是对象),需要使用firstChild;(不管是什么浏览器)

节点属性

节点属性attributes是Node接口定义的属性。

节点属性attributes就是节点(特别是元素节点)的属性。

事实上，attributes中包含的是一个节点的所有属性的集合。

attributes.getNameItem()和Element对象的getAttribute()方法类似。

检测子节点和属性

查看是否存在子节点： hasChildNodes()

查看是否存在属性：hasAttributes()

即使节点中没有定义属性，其attributes属性仍然有效的，而且长度值为0。同样节点中的childNodes属性也是如此。

当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes()和hasAttributes()方法。但是，如果还想知道该节点中包含多少子节点和属性的话，仍要使用attributes和childNodes属性。

在IE浏览器中，不存在hasAttributes()方法！

操作 DOM 节点树

插入节点

appendChild()方法: 父节点调用，在末尾添加子节点

insertBefore(new,old)方法: 父节点调用，在指定节点之前添加子节点

没有insertAfter()方法

删除节点：removeChild():父节点调用,删除节点

替换节点：replaceChild(new,old): 父节点调用，替换节点

复制节点：cloneNode(boolean) 不是父节点调用,其中，参数boolean是判断是否复制子节点。默认是false

移动节点：由以下三种方法组合完成

查找节点

getElementById()：通过节点的id属性，查找对应节点。

getElementsByName()：通过节点的name属性，查找对应节点。

getElementsByTagName()：通过节点名称，查找对应节点。

Node节点方法小结

parentNode 获取父节点

childNodes 所有子节点

firstChild 第一个子节点

lastChild 最后一个子节点

nextSibling 下一个兄弟节点

previousSibling 上一个兄弟节点

appendChild(node) 父节点调用，在末尾添加子节点

insertBefore(new,old) 父节点调用，在指定节点之前添加子节点

replaceChild(new,old) 父节点调用，替换节点

removeChild(node) 父节点调用,删除节点

cloneNode(boolean) 不是父节点调用,复制节点

boolean ：

如果是true，复制子节点

如果是false，不复制子节点，默认是false

练习：

我是span的区域

• 北京
• 上海
• 广州

• 小时代1
• 小时代2
• 小时代3

---

我是按钮

var input = document.getElementById("nameId");

//alert(input.nodeName); // INPUT

//alert(input.nodeType); // 1

//alert(input.nodeValue); // null

var attr = input.getAttributeNode("type");

//alert(attr.nodeName); // type

//alert(attr.nodeType); // 2

//alert(attr.nodeValue); // text

var span = document.getElementById("spanId");

var text = span.firstChild;

//alert(text.nodeName); // #text

//alert(text.nodeType); // 3

//alert(text.nodeValue); // 我是span的区域

var ul = document.getElementById("ulId");

var li = ul.firstElementChild;

// alert(li.nodeType); //1

// 是否包含子节点

// alert(ul.hasChildNodes());

// 是否包含属性

// alert(ul.hasAttributes());

// 点击上海，用小时代2替换上海

document.getElementById("sh").onclick = function(){

// var sh = document.getElementById("sh");

// var xsd2 = document.getElementById("xsd2");

// var ul = sh.parentNode;

// ul.replaceChild(xsd2, sh);

var ul = this.parentNode;

var xsd2 = document.getElementById("xsd2");

ul.replaceChild(xsd2,this);

};

// 删除节点

document.getElementById("sh").onclick = function(){

// this.parentNode.removeChild(this);

var sh = document.getElementById("sh");

var ul = sh.parentNode;

ul.removeChild(sh);

};

*/

// 复制button的按钮，添加到span标签的中间

var btn = document.getElementById("btnId");

var newbtn = btn.cloneNode(true);

var span = document.getElementById("spanId2");

span.appendChild(newbtn);

在浏览器中按F12可进行bug调试

innerHTML属性

innerHTML ：获取和设置文本内容。

浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。

innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。

innerHTML 属性多与div或span标签配合使用。

这是span的区域

获取焦点的事件

输入姓名：

输入密码：

var span = document.getElementById("spanId");

// alert(span.innerHTML);

var span2 = document.getElementById("spanId2");

span2.innerHTML = "这是span的区域2";

*/

// 提示输入的信息

function run(){

var uspan = document.getElementById("uspan");

uspan.innerHTML = "您只能输入特殊字符";

}

// 失去焦点的时候

//

function run2(){

// 获取用户输入的姓名

// ajax，把用户输入的姓名，传到后台，在后台做匹配的操作，后台处理完成，返回结果。

var uspan = document.getElementById("uspan");

uspan.innerHTML = "用户名已存在";

}

JavaScript常用事件

鼠标移动事件

onmousemove

onmouseout：鼠标移出某个区域

onmouseover：鼠标移入某个区域

document.getElementById("info").value = "鼠标在输入框上";}

function mouseouttest(){

document.getElementById("info").value= "鼠标在输入框外";}

鼠标点击事件(重点)

onclick 单击

ondblclick 双击

加载与卸载事件(重点)

onload 加载

onunload 卸载

聚焦与离焦事件(重点)

onfocus:获取焦点

onblur:失去焦点

键盘

onkeyup:按下抬起

java

js

jsp