DOM模型


一、DOM框架:

DOM模型

元素节点:a

属性节点:title=”css”,href=http://picasaweb.google.com/isaacshun

文本节点:isaac’s Blog

二、访问节点

节点信息

Ÿ           nodeName(节点名称)

Ÿ           nodeValue(节点值)

Ÿ           nodeType(节点类型)

nodeName 属性含有某个节点的名称。

Ÿ           元素节点的 nodeName 是标签名称

Ÿ           属性节点的 nodeName 是属性名称

Ÿ           文本节点的 nodeName 永远是 #text

Ÿ           文档节点的 nodeName 永远是 #document

nodeValue

Ÿ           对于文本节点,nodeValue 属性包含文本。

Ÿ           对于属性节点,nodeValue 属性包含属性值。

Ÿ           nodeValue 属性对于文档节点和元素节点是不可用的。

注:<body>内容</body> <body>中的信息就是文本节点的nodeValue

nodeType

元素类型

节点类型

元素

1

属性

2

文本

3

注释

8

文档

9

通过标签名称tagName访问节点,即getElementsByTagName(“tagName”)

通过标签的Name访问节点,即getElementsByName(“name”);

通过标签的Id访问节点,即getElementById(“id”);

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
< script  language ="javascript" >
 
function  getElements()
 {
 
// 放在函数内页面加载后才用<body>的onload加载
     var  x = document.getElementsByTagName( " li " );
    alert(x.length
+ "   " + x[ 0 ].tagName + "   " + x[ 2 ].childNodes[ 0 ].nodeName + "   " + x[ 2 ].childNodes[ 0 ].nodeValue + "   " + x[ 2 ].childNodes[ 0 ].nodeType);
       
var  y = document.getElementById( " ulId " );
       alert(y.getAttribute(
" type " ));  // 访问节点属性
 }
</ script >
</ head >
< body  onload ="getElements()" >
    
< ul  id ="ulId"  type ="square" > 新闻管理
        
< li >
        新闻发布
        
</ li >
        
< li >
        新闻查找
        
</ li >
        
< li >
        新闻删除
        
</ li >
    
</ ul >
 
<!-- <input type="button" name="aa" onclick="getElements()" value="名为 'myInput' 的元素有多少个?" /> -->
</ body >
</ html >

DOM模型

三、创建新节点

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 创建新节点 </ title >
< script  language ="javascript" >
function  aa()
{
   
var  p = document.getElementById( " aa " );
   
var  newNode = document.createTextNode( " 这是一个新节点 " );
   p.appendChild(newNode);
}
</ script >
</ head >
< body  onload ="aa()" >
< id ="aa" >
   创建新节点
</ p >
</ body >

结果:

四、innerHTML

表示某个标签之间的所有内容,包括代码。该属性可以读,也可以写。

< head >
< script  language ="javascript" >
function  aa()
{
   
var  p = document.getElementById( " b " );
   alert(p.innerHTML);
   p.innerHTML
= " <input type='button' value='确定'/> "
}
</ script >
</ head >
< body  onload ="aa()" >
< div  id ="b" >
< h3 >
测试innerHTML的作用
</ h3 >
</ div >
</ body >

DOM模型DOM模型

你可能感兴趣的:(dom)