javascript DOM编程基础

<html >


<head>
  <title name="s">js DOM编程基础</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <script type="text/javascript">
    //js闭包
      (function(){
          //通过转义字符实现特殊字符的输出
          var s = "fsdf'423\"fsd";
          var d = 'fsd\'f"fds"sd';
          alert(s+" , "+d);

      
      })();
    
      //在dom文档加载完成后触发 
      //卸载上边的闭包中会顺序执行，结果为0
      //由于使用FireFox测试，不用alert了，点来点去太麻烦了
      function get(){
             ///8
              var ipt = document.getElementsByTagName("input");
      console.info(ipt.length);
            
            //根据id获取文本框的值
          var it = document.getElementById("fc");
          console.info(it.value);

          //获取普通标签之间的值
            var is = document.getElementById("msg");
          console.info(is.innerHTML);

          //获取嵌套标签的值
          var com = document.getElementById("it");
          console.info(com.innerHTML);//<h1>javascript高级程序设计</h1>
          //如果只是取出其中的内容，jquery中的text可以搞定，但是js没找到很直接的解析方法
          //可以通过getElementsByTagName('h1')[0].innerHTML获取

          //也可以通过获取其子节点实现
          /*
          js 还是相当强大的
          */
          var vl = com.childNodes;
          console.info(vl[0].innerHTML);
          //获取文本框的值,等同于vl[0].innerHTML
          /*
          nodeType:
           元素类型 --> 节点类型
            元素element --> 1
              属性attr --> 2
                文本text -->  3
                注释comments --> 8
                    文档document --> 9
          */
          console.info(com.lastChild.nodeValue);//此处未获取到
          
            console.info(com.lastChild.nodeName);//input
              console.info(com.lastChild.nodeType);//1
          console.info(com.firstChild.innerHTML);
       
       //15 通配符* ，统计所有的标签总数
       /*
         通配符统计，html，head ，body等网页中所有的html标签
       */
          var all = document.getElementsByTagName("*");
          //dom对象
    
          console.info(typeof all[0]+","+all.length+","+all[0]);//object,15,[object HTMLHtmlElement]

          for (i=0;i<all.length;i++){
           //获取name属性的值和下标值
              console.info(all[i].getAttribute("name")+","+i);

          }
        

        //js创建标签元素并添加到DOM文档中
          var p =document.createElement("p");

            p.innerHTML="javascript创建标签元素";

            //将元素追加到指定的标签中
            com.appendChild(p);


      }

  </script>
</head>


<body onload="get();">


      <input >
      <input >
      <input id="fc" >
      <span id="msg">javascript DOM编程</span>
      <div>
       <span id="it"><h1>javascript高级程序设计</h1><input type="text" name="wo ca" value="内嵌子节点值的获取"></span>
      </div>
      <input  name="js">
      <input >
      <input >
      <input >
      <input >


</body>


</html>

nodeValue以及其与value的区别以及JS nodeName、nodeValue、nodeType返回类型

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

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

元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

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

对于属性节点，nodeValue 属性包含属性值。

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

nodeType nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型 --> 节点类型元素element --> 1 属性attr --> 2 文本text --> 3 注释comments --> 8 文档document --> 9

nodeValue就是用来得到“文本元素的值”的，即只适用于“文本节点”；

例子：

<html>

<head>

function getNodeValue() {

var nv=document.getElementById("td1").firstChild.nodeValue;

var nn=document.getElementById("tr1").firstChild.nodeName;

var nv1=document.getElementById("tr1").firstChild.nodeValue;

alert("nv="+nv);

alert("nn="+nn);

alert("nv1="+nv1);

}

</script>

</head>

<body>

<table>

<td>Alaska</td>

</tr>

</table>

</body>

</html>

以上得到的结果：

nv=John;

nn=td;

nv1=null;

要分清元素的value属性和nodeValue 不一样，nodeValue适用于“文本节点”和“属性节点”；对应“文档节点”和“标签节点”不起作用

接口	nodeType常量	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

/* 定义和用法　　

childNodes 属性可返回指定节点的子节点的节点列表，也就是包含在容易内的所有控件与文本属性字段，如果希望得到这些中的某些，必须通过类别属性进行筛选。　　 childNodes常用属性：　　

nodeValue：

nodeValue适用于“文本节点（<td>中的文本内容）”和“属性节点”；对应“文档节点”和“标签节点（li）”不起作用　　

nodeName：元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

nodeType:

返回的数值

1：元素节点、

2：属性节点、

3：文本节点

firstChild：返回容器内的第一个控件对象，可以利用这个返回对象去获取该控件的属性信息

parentNode：返回子节点对象外层的父对象，可以利用这个返回父对象去获取该控件的属性信息

previousSibling:获取同级节点上级节点对象，可以利用这个返回对象去获取该节点的属性信息

nextSibling：获取同级节点下级节点对象，可以利用这个返回对象去获取该节点的属性信息

语法：　　

nodeObject.childNodes

提示和注释　　

提示：请使用 length 属性来计算一个节点列表中节点的数目。当你已获悉节点列表的长度后，您就可以轻松地循环遍历此列表，并提取您所需要的值！

实例　

在所有的例子中，我们将使用 XML 文件 books.xml，以及 JavaScript 函数 loadXMLDoc()。　　

　　下面的代码片段显示了此XML文档的子节点：　　

　　 xmlDoc=loadXMLDoc("books.xml"); 　　　

　 var x=xmlDoc.childNodes; 　　　　

for (i=0;i<x.length;i++) {

document.write("Nodename: " + x[i].nodeName)

document.write(" (nodetype: " + x[i].nodeType + ")

<br />")

} */

posted @ 2015-01-04 16:34 snow__wolf 阅读(182) 评论(0) 收藏举报

刷新页面返回顶部

xwolf

花开不倦只为恋蝶香，人逢知己无奢望...

javascript DOM编程基础

nodeValue以及其与value的区别以及JS nodeName、nodeValue、nodeType返回类型

公告