2012-02-20

最新推荐文章于 2024-07-25 11:52:08 发布

梁康

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量378

点赞数

分类专栏：学习笔记文章标签：文档 stylesheet html function input null

本文链接：https://blog.csdn.net/liangkang514/article/details/7277719

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Window.οnlοad=funtion（）{}//匿名函数的处理，在script中应用表示当窗体加载完毕后触发该函数

DOM入门

DOM文档对象模型，可以以一种独立于平台的和语言的方式访问和修改一个文档的内容和结构。换言之，这是表示和处理一个html或者xml文档的常用方式。有一点很重要，DOM的设计是一对象管理组织的规约为基础的，一次可以用于任何编程语言。

nodeName string 节点的名字；根据节点的类型而定义

nodeValue string 节点的值；根据节点的类型而定义

nodeType Number 节点的类型常量值之一

ownerDocument Document 指向这个节点所属的文档

firstChild Node 指向在childNodes列中的第一个节点

lastChild Node指向在childeNodes列中的最后一个节点

childNodes NodlList 所有子节点的列表

previousSibling Node 指向前一个兄弟节点；如果这个节点是第一个节点，纳闷改制为null

nextSibling Node指向后一个兄弟节点；如果这个节点是最后一个兄弟节点，那么该值为null

hasChildNodes（） Boolean 当chailNodes包含一个或多个节点时，返回真

Atributes NamedNodeMap 包含了代表一个元素的特性的attr对象；仅用于Element节点

appendChild（node） node 将node添加刀片childNodes的末尾

removeChild（node） node 从childNodes中删除node

replaceChild （newnode，oldwode）node 将childNodes总的oldnode替换成newnode

insertBefore （newnode，refnode ） node childNodes之后那个的refnode前插入newnode

元素节点：标签名 null 1

属性节点：属性名属性值 2

文本节点： #text 文本内容 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>example01.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GBK">

</head>

<body>
    <div id="one">
    用户名:<input type="text" value="请输入用户名" id="uname"/>
  <div id="two"> laowang </div>
    </div>
</body>
</html>
<script type="text/javascript">
//当窗体加载完毕之后触发的函数
window.onload = function(){ //匿名函数的处理
  //document对象
  //获取根元素
  var htmlDom = document.documentElement;
  //alert("节点名"+htmlDom.nodeName);

  //判断当前节点是否有孩子节点
  //是否有属性节点
  if(htmlDom.nodeType==1){
   var attrsDom = htmlDom.attributes;//得到所有的属性节点
    alert(attrsDom.length);//属性节点为0
//   for(var i = 0;i<attrsDom.length;i++){
//    var attr = attrsDom.item(i);//得到具体的属性
//    alert(attr);
//   }
  }
  if(htmlDom.hasChildNodes()){

  }
}

/*
* 遍历出从html开始的所有的属性节点，文本节点
* */

function test1(){
  //文档节点 document
  //文档节点对象getElementById(id的名称) 根据指定的id名称获取节点对象，也称为dom镀锡
  var inputDom = document.getElementById("uname");
  //当前dom对象的属性值
  alert(inputDom.type+" "+inputDom.value+"   "+inputDom.id);

  //节点属性 <input type="text" value="请输入用户名" id="uname"/>
  //元素节点名称就是标签名称     value值为null    元素节点的值为1
  alert("当前节点的名称："+inputDom.nodeName+" 当前节点的value值"+inputDom.nodeValue+"节点的类型"+inputDom.nodeType);

  //首先判断该节点是否是元素节点
  if(inputDom.nodeType==1){
   //attributes来获取该元素节点的属性
   var attrs = inputDom.attributes;//仅用于元素节点
   alert(attrs.length);//在ie中为136，在firxfox中为3

   //遍历属性节点
   for(var i = 0;i<attrs.length;i++){
    //得到一个具体的属性节点
    var attr = attrs.item(i);//获取具体的属性
    //输出属性节点的名称和节点类型值
    alert("属性节点的名称："+attr.nodeName+"属性节点的value值"+attr.nodeValue+"属性阶段的类型值"+attr.nodeType);
   }
  }
}

function test2(){
  var divDom = document.getElementById("two");
  alert("当前节点的名称："+divDom.nodeName+" 当前节点的value值"+divDom.nodeValue+"节点的类型"+divDom.nodeType);
  //判断当前节点是否有子节点
  if(divDom.hasChildNodes()){
   var son = divDom.childNodes;//可以遍历
   alert("节点的大小是："+son.length);//结果为1
  }


  //直接获取当前节点的孩子节点的第一个节点
  if(divDom.hasChildNodes()){
   //获取孩子节点的第一个字节的   文本类型
   var firstDom = divDom.firstChild;
   alert("文本节点类型的名称"+firstDom.nodeName+" "+firstDom.nodeValue +" "+firstDom.nodeType)

  }
}
/**
*
*/
</script>

梁康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2012-02-20

Window.onload=funtion（）{}//匿名函数的处理，在script中应用表示当窗体加载完毕后触发该函数DOM入门DOM文档对象模型，可以以一种独立于平台的和语言的方式访问和修改一个文档的内容和结构。换言之，这是表示和处理一个html或者xml文档的常用方式。有一点很重要，DOM的设计是一对象管理组织的规约为基础的，一次可以用于任何编程语言。nodeName stri
复制链接

扫一扫