Javascript知识点<一>
DHTML:动态的HTML语言
它不是一门新的技术，它是几个技术的综合体
DHTML包含以下技术：
HTML: 将页面中的数据使用HTML标签进行封装起来， 便于数据的处理
CSS : 讲HTML标签所封装的数据进行样式的美化
javascript：处理页面中复杂逻辑业务 例如（点击操作）
DOM : 讲HTML中数据（标签、属性、文本） 解析成 对于对象，便于操作 对象。属性 对象。方法（）
DOM： document object model 文档对象模型
作用：将HTML数据（标签、属性、文本） 解析成对象操作。
原理： 讲html文档 在加载到内存中的时候，通过DOM解析技术，在内存中 生产 DOM树。
树种的分支 可以成为 节点（对象）
BOM： browser object model 浏览器对象模型
BOM 其实相当于一个浏览器中的窗口
BOM在 DHTML技术用， 使用一个 window对象 代表浏览器中一个打开的窗口。
BOM包含如下几个方面：
navigator 包含关于 Web 浏览器的信息。
location 包含关于当前 URL 的信息。
history 包含了用户已浏览的 URL 的信息。
document 代表给定浏览器窗口中的 HTML 文档。
javascript常用操作：
将信息在页面中通过消息提示框弹出提示：
alert("");
将信息在页面中 显示：
document.write("<font color='red'>文字</font>");
javascript和html结合方式
在页面中 直接写<script type="text/javascript">.....</script>标签
加载一个js文件 <script type="text/javascript" src="1.js">
JS中的DOM操作:
DOM:文档对象模型.
DOM:将文档加载到内存 形成一个树状结构.
Document:代表是整个文档对象.
* 查找标签.
* document.getElementById();
* document.getElementsByTagName();
* document.getElementsByName();
* 创建元素:
* document.createElement();
* document.createTextNode();
Element:元素对象(标签对象)
* 操作元素的属性:
* setAttribute();
* getAttribute();
* removeAttribute();
* 在标签中查找标签:
* getElementsByTagName();
Node:节点对象
* 属性:
nodeName: 元素节点 标签名 属性节点 属性名 文本节点 #text
nodeType: 元素节点 1 属性节点 2 文本节点 3
nodeValue: 元素节点 null 属性节点 属性值 文本节点 文本内容.
* 插入节点.
appendChild();
insertBefore();
* 父节点 子节点 同辈节点
parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling
* 删除子节点
removeChild();
* 替换节点
replaceChild();
* 复制节点
cloneNode(); // 连同子节点一起复制 boolean:true
innerHTML:
* 元素中的html内容.设置元素中的html.
* 动态表格的生成.
如何通过document获取节点对象呢？
有三种方式：
getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
通过标签中ID属性，来获取节点对象的方式.结果为一个节点对象 那么，说明了ID属性在页面中必须要唯一
getElementsByName 根据 NAME 标签属性的值获取对象的集合。
通过标签中Name属性，来获取节点对象的方式.结果为一个或多个节点
getElementsByTagName 获取基于指定元素名称的对象集合。
通过标签的标签名，来获取节点的方式，结果为一个或多个节点
方法：
getAttribute 获取指定标签属性的值。 使用前提： 必须在标签中 先指定value属性值
属性：
value 设置或获取控件对象的显示值。当控件对象提交时此值将返回给服务器。
innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
innerText 设置或获取位于对象起始和结束标签内的文本。
节点的增删改查
<!--加入样式表-->
<style type="text/css">
div {
border:#0099FF 1px solid;
height:60px;
width:120px;
margin:20px 0px 20px 20px;
padding:10px 0px 0px 20px;
}
#div_1{
background-color:#00FFFF;
}
#div_2{
background-color:#FF3399;
}
#div_3{
background-color:#0000FF;
}
#div_4{
background-color:#FFFF66;
}
</style>
<script type="text/javascript">
function addNode(){
/*
在div_1中 加入"div区域1"
思路：1、找到DIV
2、创建 文本 节点
3、将文本节点 放入 div中
*/
//通过ID属性来找到DIV节点
//var divNode = document.getElementById("div_1");
//创建一个节点 （文本节点）
//var textNode = document.createTextNode("div区域1");
//向div中添加节点
//divNode.appendChild( textNode );
//-----------------------------------------------------
/*
在div_1中 加入<a href="http://www.baidu.com">百度</a>
思路：1、找到DIV
2、创建 元素 节点
3、将元素 节点 放入 div中
*/
//通过ID属性来找到DIV节点
var divNode = document.getElementById("div_1");
//创建元素节点
var aNode = document.createElement("a");
//设置属性
aNode.setAttribute("href","http://www.baidu.com");
//设置文字
aNode.innerHTML="百度";
//向div中添加节点
divNode.appendChild( aNode );
}
function deleteNode(){
/*
删除DIV2
思路：
1、找到所要删除DIV
2、通过DIV找到父节点
3、通过父节点删除指定的DIV子节点
*/
//方式一
//找到DIV2
//var divNode = document.getElementById("div_2");
//删除DIV
//divNode.removeNode(true);
//方式二
//找到DIV2
var divNode = document.getElementById("div_2");
//找到父节点
var parentNode = divNode.parentNode;
//删除指定的子节点
parentNode.removeChild( divNode );
}
function updateNode(){
/*
将 div区域3 替换成 新的文字
思路：
1、找到原有文字“div区域3”
2、创建新文字
3、用文字替换老文字
*/
//1、找到原有文字“div区域3”
//通过div_3找到文字节点 “div区域3”
var divNode = document.getElementById("div_3");
//获取div3中所有子节点
var childNodes = divNode.childNodes;
//获取第一个子节点
var childNode = childNodes[0];
//2、创建新文字
var newTextNode = document.createTextNode("haha");
//3、替换节点
//方式一
//childNode.replaceNode( newTextNode );
//方式二
divNode.replaceChild( newTextNode, childNode);
}
function copyNode(){
/*
将div区域4 复制到div区域1上
思路：
1、找到DIV1 DIV4
2、克隆div4 产生克隆后的新节点
3、克隆后的新节点放置到div1
*/
//1、找到DIV1 DIV4
var divNode1 = document.getElementById("div_1");
var divNode4 = document.getElementById("div_4");
//2、克隆div4 产生克隆后的新节点
var newNode = divNode4.cloneNode(true);
//3、克隆后的新节点放置到div1
//方式一
//divNode1.replaceNode( newNode );
//方式二
//找到div1的父节点
var parentNode = divNode1.parentNode;
parentNode.replaceChild( newNode, divNode1);
}
</script>
</head>
<!--
创建节点的方法：
createElement 为指定标签创建一个元素的实例 <a></a>
createTextNode 从指定值中创建文本字符串。 div区域2
添加节点的方法：
appendChild 给对象追加一个子元素。
删除节点的方法：
removeChild 从元素上删除子结点。
删除父节点中 所指定的子节点(会删除包含孙子节点)
(删除孩子)
removeNode 从文档层次中删除对象。
删除当前指定的节点，默认不删除子节点 ,如果参数设置为true，代表同时删除子节点
(自杀)
替换节点的方法：
replaceChild 用新的子元素替换已有的子元素。
语法：replaceChild(oNewNode, oChildNode)
replaceNode 用其它元素替换对象。
克隆节点的方法：
cloneNode 从文档层次中复制对对象的引用。
cloneNode( [bCloneChildren])
方法：
setAttribute 设置指定标签中属性的值
属性：
parentNode 获取文档层次中的父对象。
集合：
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
-->
<body>
<div id="div_1">
</div>
<div id="div_2">
div区域2
</div>
<div id="div_3">
div区域3
</div>
<div id="div_4">
div区域4
</div>
<hr />
<input type="button" value="创建并添加节点" onclick="addNode()" />
<input type="button" value="删除节点" onclick="deleteNode()" />
<input type="button" value="替换节点" onclick="updateNode()" />
<input type="button" value="克隆节点" onclick="copyNode()" />
</body>