亚洲城88手机版官网:document.documentElement的一对选取才能

复制代码 代码如下:

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

<body>
<span id=”lovespan”>熊掌我所欲也!</span>
</body>
<script type=”text/javascript”>
var lovespan=document.getElementById(“lovespan”)
var newspan=document.createElement(“span”)
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML=”鱼与”;
</script>

–documentElement 属性可返回文档的根节点。
<html xmlns=”;
<head>
<title></title>
<script type=”text/javascript”>
function shownode() {
var ohtml = document.documentElement;
//alert(ohtml.nodeName);
//alert(ohtml.childNodes.length);
//alert(ohtml.childNodes[1].nodeName); //获取body
//var obody = ohtml.childNodes[1]; //一层层的找到div
var obody = ohtml.lastChild; //快速获取ohtml的最后一个子节点
//alert(obody.childNodes[0].nodeName);
//alert(obody.parentNode.nodeName); //根据子节点找到想要的父节点
//alert(obody.previousSibling.nodeName);
var ohead = ohtml.childNodes[0];
// alert(ohead.nextSibling.nodeName);
}
</script>
</head>
//body如果和div之间有空格,或者每个层之间有空格,会影响获取结果
<body><div id=”div1″>第一层</div> <div
id=”div2″>第二层</div>
<div>第三层<img src=”images/4.jpg” /></div>
<div>
第四层<input id=”Button1″ type=”button” value=”显示节点”
onclick=”shownode();”/></div>
</body>
</html>

五、DOM常用的API 
这些常用的API是要记下来的,当然在非IE的浏览器里也会有效,是符合w3c的。这些API在以后的编程中会常常用到。正如每个编程平台所提供的API一样,常用必须记下来,节省时间从而提高编程效率。只写几个最常用的,其它的API会在以后的示例中写出。由浅而深,从易到难嘛。

TD—–TD—–TD TD—–TD—–TD TD—–TD—–TD

您可能感兴趣的文章:

  • document.createElement()用法及注意事项(ff下不兼容)
  • document.createElement()用法
  • document.getElementById介绍
  • 用document.documentElement取代document.body的原因分析
  • 由document.body和document.documentElement想到的
  • document.getElementById的一些细节
  • document.all还是document.getElementsByName?

2)、属性:object.innerHTML,返回值:一个节点内的HTML值。该属性为可写属性。它虽然不是获取结点,但经常与获取结点相结合,所以我把它放在获取结点这一类,它的属性就类似于是纯文本节点属性中的data。以document.getElementById和object.innerHTML这两个API为例,

复制代码 代码如下:

   
因此,必须要对DOM有一定的认识,才能把Javascript应用于WEB,或你的RIA应用当中,因为DHTML本质上就是操作DOM树。 

2、getElementsByName(name)
返回名字是name的元素数组,在IE6中元素ID匹配这个名字的话,这个元素也将包括在内,而且getElementsByName()仅用于象input,radio,checkbox等元素对象。
象下面例子中georges数组的长度应该是0。

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> 

复制代码 代码如下:

 function
myGetElementById (id) { 
     
var nodeRoot = document; //这个是根结点 
     
var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点 
     
var nodeBody = nodeHTML.childNodes[1]; //body结点 
     
var bodyChild = nodeBody.childNodes; //body的孩子 
     
for (var i=0; i< bodyChild.length; i++) {
//简单的遍历(指body的孩子下的深度为1) 
       
if (bodyChild[i].id==id) return bodyChild[i]; 
     
}; 
     
return null; 
   

   
function TestGetElementById (id) { 
     
var node = myGetElementById(id); 
     
if (node!=null) { 
       
alert(“找到结点 “+id+”!”); 
       
alert(node.childNodes[0].data); 
     
} else { 
       
alert(“没有找到结点 “+id+”.”); 
     

   

复制代码 代码如下:

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

复制代码 代码如下:

<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> 

5、insertBefore(newElement, targetElement)
给当前节点插入一个新节点,如果targetElement被设置为null,那新节点被当作最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置。

</script> 
</head> 
<body> 
<div
id=”aTestNode”></div> 
<div
id=”textNode”>tutorial of DHTML and javascript
programming</div> 
<input
onclick=”TestGetElementById(‘textNode’)” type=”button”
value=”change”/> 
</body> 
</html> 

复制代码 代码如下:

一、什么是DOM? 

<p><b>新人类,什么?!</b></p>
<script type=”text/javascript”>
window.onload=function(){
document.getElementsByTagName(“p”)[0].innerHTML=”<b>新新人类,什么?!</b>”
}
</script>

我们参照树的概念,画出该HTML文档结构的DOM树: 
         
html 
      
body head 
       
div     title 
        
文本    文本 
从上面的图示可以看出 
html有两个子结点,而html就是这两个子节点的父结点 
head有节点title,title下有一个文本节点 
body下有节点div,div下有一个文本节点

<div id=”adiv”><span
id=”innerspan”>span</span></div>
<script type=”text/javascript”>
var oldel=document.getElementById(“innerspan”);
var newel=document.createElement(“p”);
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById(“adiv”).replaceChild(newel, oldel);
</script>

三、操作DOM树 
开篇已经说过,DHTML本质就是操作DOM树。如何操作它呢? 
假设我要改变上面HTML文档中div结点的文本,如何做? 
程序代码 
<html> 
<head> 
<title>never-online’s
website</title> 
<script> 
 
function changedivText (strText) { 
   
var nodeRoot = document; //这个是根结点 
   
var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点 
   
var nodeBody = nodeHTML.childNodes[1]; //body结点 
   
var nodeDiv = nodeBody.childNodes[0]; //DIV结点 
   
var nodeText = nodeDiv.childNodes[0];//文本结点’ 
   
nodeText.data = strText;
//文本节点有data属性,我们可以改变这个属性,也就成功的操作了DOM树中的一个结点了 

</script> 
</head> 
<body> 
<div>tutorial
of DHTML and javascript programming</div> 
 <input
onclick=”changedivText(‘change?’)” type=”button”
value=”change”/> 
</body> 
</html> 

<body>
<input name=’divid’ type=”text”/>
<div id=’divid’>
Just for testing;
</div>
<script>
var div=document.getElementById(‘divid’);
alert(div.nodeName);
</script>
</body>

  
什么叫DOM,DOM是文档对象模型(Document Object
Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。

第一个例子:
使用DOM1.0 的javascript动态地创建一个HTML table。

3、TEXT_NODE 
(text)文本结点类型,该枚举型的值是3。上文中的文本,如:tutorial
of DHTML and javascript programming就是属于该类型。 
(注:一个空格也就可能是一个文本结点) 
通常更需要注意的是文本结点,有可能一个回车,一个空格都是文本结点。这一点以后会碰到,当然,我们也有办法处理,这里先不要急,以后也会说到的。 

复制代码 代码如下:

  
以后的编程当中,希望你能够把DHTML.chm这本手册也拿上,如果你需要兼容gecko,把gecko的DOM手册也带上。因为API太多,想不起来的接口还可以查这本手册。
如果你要测试浏览器是否是支持DOM的,简单的一句就可以判断 
  
<script> 
   
var isSupportDOM = !!document.getElementById;
//两个取反,这已经在上节中说过了,意思是强制转型 
    
alert(“你的浏览器 ” +(isSupportDOM?””:”不”)+ “支持 DOM!”); 
</script> 

<div id=”father”><div id=”child”>A
child</div></div>
<script type=”text/javascript”>
var childnode=document.getElementById(“child”)
var
removednode=document.getElementById(“father”).removeChild(childnode)
</script>

<html> 
<head> 
<title>never-online’s
website</title> 
<script> 
 
function changedivText (strText) { 
   
var node = document.getElementById(“textNode”); 
   
node.innerHTML = strText; 
 

</script> 
</head> 
<body> 
<div
id=”textNode”>tutorial of DHTML and javascript
programming</div> 
<input
onclick=”changedivText(‘change?’)” type=”button”
value=”change”/> 
</body> 
</html> 

<script>
function wow() {
alert(“我好象没有点鼠标啊”);
}
</script>
<div id=”test” onclick=’wow()’>hhh</div>
<script type=”text/javascript”>
var div = document.getElementById(“test”);
div.click();
</script>