DOM

1. 节点

getElementsByName方法

 <!DOCTYPE HTML>
 <html>
 <head>
 <script type="text/javascript">
 function getnum(){
   var mynode = document.getElementsByName("myt");
   alert(mynode.length);
 }
 </script>
 </head>
 <body>
 <input name="myt" type="text" value="1">
 <input name="myt" type="text" value="2">
 <input name="myt" type="text" value="3">
 <input name="myt" type="text" value="4">
 <input name="myt" type="text" value="5">
 <input name="myt" type="text" value="6">

 <br />
 <input type="button" onclick="getnum()" value="看看有几项?" />
 </body>
 </html>

getElementsByTagName方法

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>JavaScript</title>
 </head>
 <body>  

         <form name="Input">
             <table align="center" width="500px" height="50%" border="1">
                 <tr>
                     <td align="center" width="100px">
                         学号:
                     </td>
                     <td align="center" width="300px">
                         <input type="text" id=userid name="user" onblur="validate();">
                         <div id=usermsg></div>
                     </td>
                 </tr>
                 <tr>
                     <td align="center" width="100px">
                         姓名:
                     </td>
                         <td align="center">
                         <input type="text" name="name">
                     </td>
                 </tr>
                 <tr>
                     <td align="center" width="%45">
                         性别:
                     </td>
                     <td align="center">
                         <input type="radio" name="sex" value="男">
                         男
                         <input type="radio" name="sex" value="女">
                         女
                     </td>
                 </tr>
                 <tr>
                     <td align="center" width="30%">
                         年龄:
                     </td>
                     <td align="center" width="300px">
                         <input type="text" name="age">
                     </td>
                 </tr>
                 <tr>
                     <td align="center" width="100px">
                         地址:
                     </td>
                     <td align="center" width="300px">
                         <input type="text" name="addr">
                     </td>
                 </tr>

             </table>
         </form>
         <h1 id="myHead" onclick="getValue()">
             看看三种获取节点的方法?
         </h1>
         <p>
             点击标题弹出它的值。
         </p>
         <input type="button" onclick="getElements()"
             value="看看name为sex的节点有几个?" />
         <Br>
         <input type="button" onclick="getTagElements()"
             value="看看标签名为input的节点有几个?" />

      <script type="text/javascript">
          function getValue()
           {
               var myH = document.getElementById("myHead");
               alert(myH.innerHTML)
           }
           function getElements()
           {
              var myS = document.getElementsByName("sex");
               alert(myS.length);
           }

           function getTagElements()
           {
               var myI = document.getElementsByTagName("input");
               alert(myI.length);
           }

      </script>        

     </body>
 </html>
 <!DOCTYPE HTML>
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
         <title>无标题文档</title>
     </head>

     <body>
         <form>
           请选择你爱好:<br>
           <input type="checkbox" name="hobby" id="hobby1">  音乐
           <input type="checkbox" name="hobby" id="hobby2">  登山
           <input type="checkbox" name="hobby" id="hobby3">  游泳
           <input type="checkbox" name="hobby" id="hobby4">  阅读
           <input type="checkbox" name="hobby" id="hobby5">  打球
           <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
           <input type="button" value = "全选" onclick = "checkall();">
           <input type="button" value = "全不选" onclick = "clearall();">
           <p>请输入您要选择爱好的序号,序号为1-6:</p>
           <input id="wb" name="wb" type="text" >
           <input name="ok" type="button" value="确定" onclick = "checkone();">
         </form>
         <script type="text/javascript">
         function checkall(){
             var hobby = document.getElementsByTagName("input");

           // 任务1
           for(var i = 0; i < hobby.length; i++) {
               if (hobby[i].type == "checkbox") hobby[i].checked = true;
           }

         }
         function clearall(){
             var hobby = document.getElementsByName("hobby");

          // 任务2
          for (var i = 0; i < hobby.length; i++) {
              if (hobby[i].type == "checkbox") hobby[i].checked = false;
          }

         }

         function checkone(){
             //var hobby = document.getElementsByName("hobby");
             var j=document.getElementById("wb").value;
             var m = document.getElementById("hobby"+j);
             m.checked = true;
             //hobby[parseInt(j)].checked = true;
          // 任务3

         }

         </script>
     </body>
 </html>

getAttribute()方法

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>getAttribute()</title>
 </head>
 <body>
 <p id="intro">课程列表</p>
     <ul>
         <li title="第1个li">HTML</li>
         <li>CSS</li>
         <li title="第3个li">JavaScript</li>
         <li title="第4个li">Jquery</li>
         <li>Html5</li>
     </ul>
 <p>以下为获取的不为空的li标签title值:</p>
 <script type="text/javascript">
     var con=document.getElementsByTagName("li");
     for (var i=0; i< con.length;i++){
       var text = con[i].getAttribute("title");
       if(text!=null)
       {
         document.write(text+"<br>");
       }
     }
  </script>
 </body>
 </html>

setAttribute方法

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>
 <body>
   <p id="intro">我的课程</p>
   <ul>
     <li title="JS">JavaScript</li>
     <li title="JQ">JQuery</li>
     <li title="">HTML/CSS</li>
     <li title="JAVA">JAVA</li>
     <li title="">PHP</li>
   </ul>
   <h1>以下为li列表title的值,当title为空时,新设置值为"WEB前端技术":</h1>
 <script type="text/javascript">
   var Lists=document.getElementsByTagName("li");
   for (var i=0; i<Lists.length;i++)
   {
     var text = Lists[i].getAttribute("title");
     document.write(text +"<br>");
     if(text=="")
     {
     Lists[i].setAttribute("title", "WEB前端技术");
     document.write(Lists[i].getAttribute("title")+"<br>");
     }
   }
 </script>
 </body>
 </html>

节点属性

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>节点属性</title>
 </head>
 <body>
   <ul>
      <li>javascript</li>
      <li>HTML/CSS</li>
      <li>jQuery</li>
   </ul>
   <script type="text/javascript">
     var text = document.getElementsByTagName("li");
     for (var i = 0; i < text.length; i++) {
         document.write(text[i].nodeName+"<br>");
         document.write(text[i].nodeValue+"<br>");
         document.write(text[i].nodeType+"<br>");
     }
   </script>
 </body>
 </html>

childNodes

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>
 <body>
 <div>
   javascript
   <p>javascript</p>
   <div>jQuery</div>
   <h5>PHP</h5>
 </div>
 <script type="text/javascript">
   var x = document.getElementsByTagName("div")[0].childNodes;
   for (var i = 0; i < x.length; i++) {
       document.write(x[i].nodeName+"<br>");
       document.write(x[i].nodeValue+"<br>");
       document.write(x[i].nodeType+"<br>");
   }

 </script>
 </body>
 </html>

firstChild和lastChild

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>
 <body>
 <div id="con">
   <p>javascript</p>
   <div>jQuery</div>
   <h5>PHP</h5>
 </div>
 <script type="text/javascript">
   var x=document.getElementById("con");
   document.write(x.firstChild.nodeName+"<br>");
   document.write(x.lastChild.nodeName+"<br>");

 </script>
 </body>
 </html>

parentNode

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>
 <body>
 <ul id="con">
 <li id="lesson1">javascript
   <ul>
       <li id="tcon"> 基础语法</li>
       <li>流程控制语句</li>
       <li>函数</li>
       <li>事件</li>
       <li>DOM</li>
   </ul>
 </li>
 <li id="lesson2">das</li>
 <li id="lesson3">dadf</li>
 <li id="lesson4">HTML/CSS
   <ul>
     <li>文字</li>
     <li>段落</li>
     <li>表单</li>
     <li>表格</li>
   </ul>
 </li></ul>
 <script  type="text/javascript">
    var mylist = document.getElementById("tcon");
    document.write(mylist.parentNode.parentNode.parentNode.lastChild.firstChild.nodeValue)
 </script> 

 </body>
 </html>

nextSibling和previousSibling

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>nextSibling</title>
 </head>
 <body>
 <ul id="u1">
             <li id="a">javascript</li>
             <li id="b">jquery</li>
             <li id="c">html</li>
         </ul>
         <ul id="u2">
             <li id="d">css3</li>
             <li id="e">php</li>
             <li id="f">java</li>
         </ul>
 <script type="text/javascript">
     function get_nextSibling(n){
         var x=n.nextSibling;
         while (x && x.nodeType!=1){
             x=x.nextSibling;
         }
         return x;
     }

     var x=document.getElementsByTagName("li")[0];
     document.write(x.nodeName);
     document.write(" = ");
     document.write(x.innerHTML);

     var y=get_nextSibling(x);

     if(y!=null){
         document.write("<br />nextsibling: ");
         document.write(y.nodeName);
         document.write(" = ");
         document.write(y.innerHTML);
     }else{
       document.write("<br>已经是最后一个节点");
     }

 </script>
 </body>
 </html>

appendChild()注意这里是在指定节点的子节点中增加新的子节点

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>
 <body>

 <ul id="test">
   <li>JavaScript</li>
   <li>HTML</li>
 </ul> 

 <script type="text/javascript">

   var otest = document.getElementById("test");
   var newnode = document.createElement("li");
   newnode.innerHTML = "PHP";
   test.appendChild(newnode);

 </script> 

 </body>
 </html>

insertBefore()在已有的子节点前插入一个新的子节点

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>
 <body>

 <ul id="test"><li>JavaScript</li><li>HTML</li></ul> 

 <script type="text/javascript">

   var otest = document.getElementById("test");
   var newnode = document.createElement("li");
   newnode.innerHTML = "PHP";
   test.insertBefore(newnode, test.childNodes[1]);

 </script> 

 </body>
 </html>

removeChild()

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>

 <body>
 <div id="content">
   <h1>html</h1>
   <h1>php</h1>
   <h1>javascript</h1>
   <h1>jquery</h1>
   <h1>java</h1>
 </div>

 <script type="text/javascript">
 function clearText() {
   var content=document.getElementById("content");
   // 在此完成该函数
   for (var i = content.childNodes.length-1; i >= 0; i--) {
       var x = content.removeChild(test.childNodes[i]);
       x = null;
   }
   /*while (content.childNodes.length > 0) {
       var x = content.removeChild(test.childNodes[0]);
       x = null;
   }*/

 }
 </script>

 <button onclick="clearText()">清除节点内容</button>

 </body>
 </html>

replaceChild()

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>
 <body>

   <div><b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div>
   <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

     <script type="text/javascript">
       function replaceMessage(){
           var newnode = document.createElement("i");
           var oldnode = document.getElementById("oldnode");
           newnode.innerHTML = oldnode.innerHTML;
           oldnode.parentNode.replaceChild(newnode, oldnode);

        }
   </script>

  </body>
 </html>

createElement

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 </head>
 <body>
 <script type="text/javascript">
 var main = document.body;
 //创建链接
 function createa(url,text)
 {
     var a = document.createElement("a");
     a.href = url;
     a.innerHTML = text;
     main.appendChild(a);
 }
 // 调用函数创建链接
 createa(" http://www.imooc.com", "慕课网");

 </script>
 </body>
 </html>

createTextNode

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <style type="text/css">

 .message{
     width:200px;
     height:100px;
     background-color:#CCC;}

 </style>
 </head>
 <body>
 <script type="text/javascript">
     var element = document.createElement("p");
     element.className = "message";
     var textNode = document.createTextNode("I love JavaScript!");
     element.appendChild(textNode);
     document.body.appendChild(element);

 </script> 

 </body>
 </html>

浏览器可视区域大小

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <script type="text/javascript">
     var w = document.documentElement.clientWidth || document.body.clientWidth;
     var h = document.documentElement.clientHeight || document.body.clientHeight;
     document.write(w + "<br/>");
     document.write(h + "<br/>");
 </script>
 </body>
 </html>

网页尺寸

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

 </head>
 <body>
 <script type="text/javascript">
     var w=document.documentElement.scrollWidth || document.body.scrollWidth;
     var h=document.documentElement.scrollHeight || document.body.scrollHeight;
     document.write(w + "<br/>");
     document.write(h + "<br/>");
 </script>
 </body>
 </html>
 <!DOCTYPE HTML>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
  <script type="text/javascript">
 var w= document.documentElement.offsetWidth
     || document.body.offsetWidth;
 var h= document.documentElement.offsetHeight
     || document.body.offsetHeight;
     document.write(w + "<br>");
     document.write(h + "<br>");
 </script>
 </body>
 </html>

JavaScript: Advanced的更多相关文章

  1. [Javascript] Advanced Console Log Arguments

    Get more mileage from your console output by going beyond mere string logging - log entire introspec ...

  2. [Javascript] Advanced Reduce: Flatten, Flatmap and ReduceRight

    Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single a ...

  3. [Javascript] Advanced Function Scope

    Something like 'for' or 'while', 'if', they don't create a new scope: ,,]; ; i < ary.length; i++) ...

  4. [Javascript] Advanced Reduce: Common Mistakes

    Take away: Always check you ruturn the accumulator Always pass in the inital value var data = [" ...

  5. [Javascript] Advanced Reduce: Additional Reducer Arguments

    Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an acc ...

  6. [Javascript] Advanced Reduce: Composing Functions with Reduce

    Learn how to use array reduction to create functional pipelines by composing arrays of functions. co ...

  7. JavaScript中URL的解码和编码

    这些URI方法encodeURI.encodeURIComponent().decodeURI().decodeURIComponent()代替了BOM的escape()和unescape()方法. ...

  8. javascript中escape()、unescape()、encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()比较

    这些URI方法encodeURI.encodeURIComponent().decodeURI().decodeURIComponent()代替了BOM的escape()和unescape()方法.U ...

  9. JavaScript简易教程(转)

    原文:http://www.cnblogs.com/yanhaijing/p/3685304.html 这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScri ...

随机推荐

  1. 【转】Java 5种字符串拼接方式性能比较。

    最近写一个东东,可能会考虑到字符串拼接,想了几种方法,但对性能未知,于是用Junit写了个单元测试. 代码如下: import java.util.ArrayList; import java.uti ...

  2. oracle communities

    应该常来这看看 https://www.oracle.com/communities/index.html

  3. [dpdk] 读官方文档(2)

    续前节.切好继续: 一,文档里提到uio_pci_generic, igb_uio, vfio_pci三个内核模块,完全搞不懂,以及dpdk-devbind.py用来查看网卡状态,我得到了下边的输出: ...

  4. C# json object互转工具

    public static T Deserializer<T>(string path) { try { System.Xml.XmlDocument xd = new System.Xm ...

  5. JS懒加载

    4.如何使用js懒加载图片       a.懒加载图片是基于jquery.js的,所以: <script src="jquery.js" type="text/ja ...

  6. PM2的使用

    PM2 是一个带有负载均衡功能的 Node 应用的进程管理器. 安装 npm install -g pm2 启动程序:pm2 start <app_name|id|all> 列举进程:pm ...

  7. android 2.2 videoView 诡异bug

    最近遇到一个问题,在2.2系统上,公司项目中使用VideoView,第一次播放正常,第二次播放黑屏. 由于公司项目使用lua + android 原生,所以试了下原生的android 的VideoVi ...

  8. javascript正则表达式(一)

    元字符 ( [ { \ ^ $ | ) ? * + . 预定义的特殊字符 字符 正则 描述 \t /\t/ 制表符 \n /\n/ 制表符 \r /\r/ 回车符 \f /\f/ 换页符 \a /\a ...

  9. Arcgis for JS之Cluster聚类分析的实现

    原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...

  10. Internal Server Error500

    开启#LoadModule rewrite_module modules/mod_rewrite.so