JavaScript: Advanced

2022-03-12 23:48:37

DOM

1. 节点

JavaScript: Advanced

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>
上一篇：Eclipse 如何重新编译程序


下一篇：linux新建分区并格式化