您的位置：首页 > 其它

DOM 文档对象模型

2016-01-15 19:17 274 查看

1.基本概念

* 文档：标记型文档（HTML/XML）

* 对象：封装属性和行为（方法）

* 模型：共性特征的体现

2.DOM解析HTML

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

文本

2.2 DOM想要操作标记型文档先解析。（解析器）

* DOM解析HTML（浏览器就可以HTML）

2.3 浏览器DOM就可以解析HTML，如何解析示例如下图：类似于树形

3.DHTML不是一种编程语言，包含HTML，ccs，DOM，js

html ：封装数据。 展示给用户的数据

css ：设置样式（显示效果）

dom ：操作HTML（解析HTML）

js ：提供逻辑（判断语句，循环语句）

4. Document：代表整个文档，重要方法如下

4.1获取标签对象的重要方法：

getElementById("id的值"); 通过元素的id的属性获取元素（标签）对象。
（推荐）

例如写id时尽量写成唯一（如果有多个相同id的对象，会获取顺序上的第一个对象）： 

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

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

获取元素element下的所有子节点（*****）（如果用document.getElementsByTagName(); 获取的是所有document的所有子结点，包括空格键）

ul.getElementsByTagName();

write("文本的内容（html的标签）") 把文本内容写到浏览器上。如：document.write( "i am lyt"+ " ");

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="inputid1" value="张三"><br>
<input type="text" name="username" value="zhangsan"><br>
<input type="text" name="username" value="zhaosi"><br>
<input type="text" name="username" value="debang"><br>

</body>

<script type="text/javascript">
var input1 = document.getElementById("inputid1");
//alert(input1.value); inputs

var input2 = document.getElementsByName("username");
//alert(input2.length);

for(var i=0; i<input2.length; i++){
var inputs = input2[i];
//alert(inputs.value);
}
//通过标签名获取,如input标签
var input3 = document.getElementsByTagName("input");
alert(input3.length);
</script>
</html>

4.2创造标签对象的方法：

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

createTextNode("文本内容") 创建文本对象

appendChild("子节点") 添加子节点

示例：在无序列表<ul>中添加<li>条目，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>

<script type="text/javascript">
//创建元素对象
var li = document.createElement("li");
//创建文本对象
var text = document.createTextNode("深圳");
//把文本对象添加到元素对象下
li.appendChild(text);
//获取ul
var ul = document.getElementsByTagName("ul")[0];
//把元素对象添加到ul下面，作为子结点。
ul.appendChild(li);

</script>
</html>

5.元素对象: Element对象

5.1获取元素对象后的对对象操作的方法：

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

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

removeAttribute("属性名称"); 删除属性

获取元素element下的所有子节点（*****）（如果用document.getElementsByTagName(); 获取的是所有document的所有子结点，包括空格键）

ul.getElementsByTagName();

代码如下：

<span style="color:#000000;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="nameID" value="zhangsan">
<ul id="ulID">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
<script type="text/javascript">

//var input1 = document.getElementById("nameID");
//alert(input1.value);

//input1.setAttribute("value","louyuting");
//alert(input1.value);

//var name = input1.getAttribute("value");
//alert(name);
//input1.removeAttribute("value");
//alert(input1.getAttribute("value"));

//============================================
var ul = document.getElementById("ulID");
//var lis = ul.childNodes;
//alert(lis.length);//获得是7
var lis2 = ul.getElementsByTagName("li");
alert(lis2.length);//获得是3

</script>
</html></span>

6.Node：每个节点的对象（包括元素，属性和文本都存在下面）

6.1主要有三个对象（包括元素，属性和文本都存在下面三个对象）

nodeName ：节点名称

nodeType ：节点类型

nodeValue ：节点的值

parentNode 获取父节点（永远是一个元素节点）

6.2 区别点：

IE6-8 IE9-11 Chrome FireFox

firstChild 第一个节点 firstElementChild?第一个节点

lastChild最后一个节点 lastElementChild 最后一个节点

nextSibling 下一同级节点 nextElementSibling?下一同级节点

previousSibling 上一同级节点 previousElementSibling?上一同级节点

<ul>

<li>北京</li>

</ul>

* 如果通过ul获取北京的子节点，使用是 ul.firstElementChild; 获取北京的子节点（IE9-11 Chrome FireFox）

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



文本内容



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

6. 3node结点方法

hasChildNodes() 检查是否包含子节点返回布尔类型

hasAttributes() 检查是否包含属性返回布尔类型

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

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

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

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

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

* boolean ：如果是true，复制子节点

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

6.4代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="nameID" value="zhangsan">
<br>
<span id="spanID">
我是span区域
</span>

<ul id="ulId">
<li>北京</li>
<li id="sh" >上海</li>
<li>广州</li>
</ul>

<ul>
<li>小时代1</li>
<li id="xsd2">小时代2</li>
<li>小时代3</li>
</ul>
<hr/>
<button id="btnId">
我是按钮
</button>
<span id="spanId2"></span>

</body>
<script type="text/javascript">
//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

//点击上海，用小时代2替换
/**		document.getElementById("sh").onclick = function(){
//alert(this.id);//this指代上海这个<li>,所以输出的id是：sh
//方法一
//var xsd2 = document.getElementById("xsd2");
//var sh = document.getElementById("sh");
//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 span2 = document.getElementById("spanId2");
span2.appendChild(newbtn);
</script>
</html>

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

7.1innerHTML属性

获取文本内容

设置文本内容

7.2 代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<span id="spanID">
我是span区域
</span>

<span id="spanID2"></span>

<h3 >获取焦点事件</h3>
输入姓名：<input type="text" name="username" id="inputId" onfocus="run()" onblur="outrun()"> <span id="spanID3"></span>
<br>
输入密码：<input type="password" name="password"/>

</body>
<script type="text/javascript">
//获取文本内容
//var span = document.getElementById("spanID");
//alert(span.innerHTML);

//设置文本内容
var span2 = document.getElementById("spanID2");
span2.innerHTML = "<br/> <font color='red'>这是spanid2的区域 </font>" ;

function run(){
var span3 = document.getElementById("spanID3");
span3.innerHTML = "只能输入字母ABC";
}
function outrun(){
//获取用户输入的姓名
//ajax，用户姓名传入后台校对；并返回结果
var span3 = document.getElementById("spanID3");
span3.innerHTML = "用户名已存在";
}

</script>
</html>

8. 事件介绍：

事件：

onclick 点击事件

onload 加载事件

onfocus 获取焦点事件

onblur 失去焦点事件

鼠标移动的事件

onmousemove

onmouseout

onmouseover

* 鼠标点击事件（*****）

onclick 单击

ondblclick 双击

* 加载和卸载

* onload（*****）加载

* onunload 卸载

* 获取焦点和失去焦点（*****）

* onfocus 获取焦点

* onblur 失去焦点

* 键盘

* onkeyup 按下抬起

* 改变事件（*****）

* onchange

* 控制表单的提交（*****）

onsubmit

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航