JavaScript学习笔记之DOM基础用法

2016-02-22    编辑:phper     点击(
Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。


.DOM:Document Object Model文档对象模型是用于HTML和XML文档的应用程序API.DOM提供了结构化的文档表现形式,
允许程序修改文档的内容和视觉表现。从本质上说,其把网页和脚本或编程语言连接了起来。

2.对于窗口中的脚本,默认引用的是当前窗口的“window”对象。如果需要访问其他框架或窗口的DOM内容,应当显式
的调用窗口对象。
eg:对于如下页面:

 

 代码如下 复制代码
 
//调用如下:
window.parent.frames[1].document.write("hutia");
parent.frame2.document.getElementById("hutia").value;

窗口对象的子对象有"clientInfomation"(客户端信息),"clipboardData"(剪贴板),"document","event","location",
"navigator(浏览器)"等等,各个对象又均有各自的属性,方法,事件和子对象集合。例如:文档(document)对象就有
主体(body)作为子对象,body对象又有页面中的各个元素作为子对象,此类对象类似于HTML标记的层层包含,
构成了HTML页面的文档对象模型树。

3.document对象是HTML页面所有HTML内容的根节点。HTML页面中的所有元素在DOM中均被对象化。
DOM模型的内容中的对象按类别来说分为:
a.HTML元素对象。例如

..b.属性对象。例如

中的href="www.111cn.net"形成的对象。c.注释对象,即 4.代表HTML元素的对象又被称为节点(node),DOM模型中,节点有两种类型:元素节点和文本节点。网易其中a元素形成了一个元素节点。网易为一个文本节点。

5.获取浏览器信息--"navigator"对象。
熟悉"navigator"对象的各种属性就行:navigator.appName....

6.操作剪切板------"clipboardData"对象。
此对象没有属性,只有3个方法:
clearData用于清空剪贴板中的数据:clipboardData.clearData([sDataFormat]);
其中sDataFormat为需要清空的剪贴板数据类型.
getData用于从剪贴板中获取数据:sRetrieveData=object.getData(sDataFormat);
setData用于将数据放置到剪贴板中:sRetrieveData=object.setData(sDataFormat);

7.操作浏览器的历史记录---history对象
history对象只有一个属性:length,是指返回当前历史记录的长度。history对象的方法有:back,forword,go.
前两个无需参数,go的语法为:history.go(vLocation);vLocation可为字符串或者整数。
eg:你输入的信息有误,请

返回上一页重新填写。

8.获取当前页面的URL---location对象。
location对象有方法有:
assign方法将页面跳转到一个新的URL地址:location.assign(strURL);
reload方法用户刷新页面:location.reload();
replace方法用户将页面跳转到一个新的URL地址:location.replace(strURL);

9.读取用户的屏幕分辨率----screen对象。
eg:

 代码如下 复制代码
//将窗口最大化。
function maximizeWindow(){
 window.moveTo(0,0);
 window.resizeTo(screen.availWidth,screen.availHeight);
}
//使窗口相对屏幕居中。
function centerWindow(width,height){
 window.moveTo((screen.availWidth-width)/2,(screen.availHeight-height)/2);
 window.resizeTo(width,height);
}

10.使用DOM的documnt对象
a.document对象特有的属性。
最重要的是cookie前面已讲过。
documentElement属性返回html代表的对象,所以window.document.documentElement.outerHTML来获得整个HTML文档的所有内容。
domain属性返回文档所在的域名
readyState属性返回文档的当前载入状态。
referrer属性可以获得当前页面的引用页面。

b.document对象的方法
1.open方法
open([uURL][,sName][,sFeatures][,bReplace]);
uURL默认为"text/html".sName为需要打开的文档所在的窗口。其他参数与window中的open方法类似。
2.close方法用来关闭文档流对象。
3.writeln和write类似,都是向当前的文档流中写入相应的HTML内容,区别是writeln会附加一个回车。
4.execCommand方法---执行打印,全选等----提供了一个控制浏览器行为的接口。
bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue])
sCommand为需要执行的命令名称。bUserInterface默认为false标示此命令执行时是否显示用户界面接口。

 代码如下 复制代码

eg:

//全选页面内容
function selectAll(){
 document.execCommand("SelectAll",false);
}
//弹出另存为对话框
function saveAs(){
 document.execCommand("SavaAs",true,"C:sample/htm");
}

11.插入和删除元素。
a.在容器元素的末尾插入元素---appendChild方法。
container.appendChild(objSub);//objSub必选为需要插入的子元素。此方法会将objSub元素插入到调用该方法的容器元素的最后。
注意:在元素生成后,可以修改其属性。在插入文档后,一些属性变为只读,对其进行赋值会导致错误。
应用:添加新链接

 代码如下 复制代码

function insertLink(){
    var newLink = document.createElement("a");
    newLink.innerHTML = $("txtDesc").value;
    newLink.href = $("txtAddr").value;
    $("div1").appendChild(newLink);
}

b.在指定的元素前插入元素---insertBefor方法
container.insertBefore(objSub [, oChildNode]);//objSub为需要插入的子元素。oChildNode为需要将子元素插入的位置后的元素。
效果:将元素objSub插入container元素的子元素oChildNode前。

c.删除节点---removeChild方法

 代码如下 复制代码
container.removeChild(objSub);


再取一个例子,注意,BODY下的结点深度为2。
<html>
<head>
<title>never-online's website</title>
<script>
  function changedivText (strText) {
    var node = document.getElementById("nodeTest");
    var myNode = node.getElementsByTagName("DIV");
    myNode[0].innerHTML = strText;
}
</script>
</head>
<body>
  <div id="nodeTest">
   <div>tutorial of DHTML and javascript programming</div>
     <input onclick="changedivText('change?')" type="button" value="change"/>
  </div>
</body>
</html>


2、动态创建与插入结点
1)、创建结点对象。document.createElement(tagname),tagname指的是一个标签,比如一个DIV,就是document.createElement("DIV"),

它返回的是这个结点的引用。
2)、在body的尾部插入结点用document.body.appendChild(object),为了容易理解,下面这个示例,我用了IE专有的属性

object.outerHTML,得到一个该元素的HTML标签内容(包括自身),这样会更容易看到效果。

 代码如下 复制代码
<html>
<head>
<title>never-online's website</title>
<script>
   function insertNode (strText) {
     alert("插入元素前的body HTML: " +document.body.outerHTML);
     var node = document.createElement("DIV");
     node.innerHTML = strText;
      document.body.appendChild(node);
      alert("插入元素后的body HTML: " +document.body.outerHTML);
}
</script>
</head>
<body>
 <div>tutorial of DHTML and javascript programming</div>
 <input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>

3)、在元素处插入结点。object.insertBefore(oNewNode [, oChildNode]),oNewNode为一个我们创建的结点,oChildNode是可选的,为 object下的一个子节点。同样的,为了看到效果,我也用了outerHTML。示例

 代码如下 复制代码

<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
   alert("插入元素前的body HTML: " +document.body.outerHTML);
    var node = document.createElement("DIV");
    var myNode = document.getElementById("textNode");
    node.innerHTML = strText;
     document.body.insertBefore(node,myNode);
   alert("插入元素后的body HTML: " +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>

3、移除结点。
1) object.parentNode.removeChild(oChildNode),这个就是语法,下面看示例。

 代码如下 复制代码

<html>
<head>
<title>never-online's website</title>
<script>
  function insertNode (strText) {
    alert("插入元素前的body HTML: " +document.body.outerHTML);
    var node = document.createElement("DIV");
    var myNode = document.getElementById("textNode");
    node.innerHTML = strText;
    document.body.insertBefore(node,myNode);
    alert("插入元素后的body HTML: " +document.body.outerHTML);
}

   function removeCreateNode() {
     alert("移除元素前的body HTML: " +document.body.outerHTML);
     var node = document.getElementById("textNode");
     node.parentNode.removeChild(node);
     alert("移除元素前的body HTML: " +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>

parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持