JavaWeb (day4)

1.案例一：在末尾添加节点

第一步：获取到 ul 标签
第二步：创建 li 标签

document.createElement（“标签名称”）方法

第三步：创建文本

document.createTextNode（“文本内容”）；

第四步：把文本添加到 li 下面
使用 appendChild 方法
第五步：给 li 添加 ul 末尾
使用 appendChild 方法

代码实现：

<body>
    <ul id="ulid">
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <input type="button" value="add" onclick="add();"/> //点击按钮
    <script type="text/javascript">
    function add(){  //末尾添加节点的方法
        var ul1=document.getElementById("ulid");  //获取到 ul 元素
        var li1=document.createElement("li");  创建一个 li 标签
        var text1=document.createTextNode("666");  创建添加的文本
        li1.appendChild(text1);  //把文本添加 li 标签里
        ul1.appendChild(li1);//把 li 标签添加到 ul 里
    }
    </script>
</body>

2.元素对象（element 对象）

要操作 element 对象，首先必须要获取到 element
——使用 document 里面相应的方法获取
方法：

  • 获取属性里面的值
    getAttribute（“属性名称”）
<input type="text" name="name1" id="inputid" value="aaa"/>

var  input1=document.getElementById（“inputid”）；
alert（input1.value）;   //弹出 aaa
alert（input1.getAttribute（“value”））； //弹出 aaa
  • 设置属性的值
input1.setAttribute（“class”，“haha”）；
  • 删除属性值
input1.removeAttribute（“name”）；

不能删除 value 值

2.想要获取标签下面的子标签

使用属性 childNodes,但是这个属性兼容性很差
获得标签下面子标签的唯一有效方法，使用 getElementByTagName 方法

<ul id="ulid1">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

var uli1=document.getElementById（“ulid1”）;
var lis=uli1.getElementsTagName（“li”）；
alert（lis.length）;//3

3.Node 对象属性一

NodeName
nodeType
nodeValue

使用 dom 解析 html 时，需要 html 里面的标签，属性和文本都封装成对象
标签节点对应的值

nodeType：1
NodeName：大写标签名称 比如 SPAN
nodeValue：null

属性节点对应的值

nodeType：2
NodeName：属性名称
nodeValue：属性的值

文本节点对应的值

nodeType：3
NodeName：#text
nodeValue：文本内容

4.Node 对象的属性二

<ul id="ulid">
<li id="li1">qqq</li>
<li id="li2">www</li>
<li id="li3">www</li>
<li id="li4">www</li>
</ul>
  • 父节点
    ul 是 li 的父节点
    parentNode
var li1=document.getElementById("li1");
var ul1=li1.parentNode;
alert（ul1.id）;//ulid
  • 子节点
    li 是 ul 的子节点

childNodes ：得到所有子节点，但是兼容性很差
firstchild：获取第一个子节点

var ul1=document.getElementById（“ulid”）；
var li1=ul1.firstchild;
alert（li1.id）;//li1

lastchild：获取最后一个子节点

var ul1=document.getElementById（“ulid”）；
var li4=ul1.lastchild;
alert（li4.id）;//li4
  • 同辈节点
    li 直接关系是同辈节点
    nextSibing：返回一个给定节点的下一个兄弟节点
    previousSibling：返回一个给定节点的上一个兄弟节点

5.操作 DOM 树一

  • appendchild方法
    添加子节点到末尾
    特点：类似于剪贴粘贴效果
    代码展示 ：
<body>
    <style type="text/css">
    #div1{
        width: 200px;
        height: 150px;
        border: 1px solid goldenrod;
    
    }
     #div2{
         margin-top: 10px;
        width: 200px;
        height: 250px;
        border: 1px solid green;
    
    }
    </style>
   <div id="div1">
       <ul id="ul1">
           <li>tom</li>
           <li>mary</li>
           <li>jack</li>
       </ul>
   </div>
   <div id="div2">

   </div>
   <input type="button" value="add1" onclick="add1()"/>
   <script type="text/javascript">
   function add1(){
       var  div2=document.getElementById("div2");//获取 div2 标签
       var ul1=document.getElementById("ul1");  //获取 ul 标签
       div2.appendChild(ul1);  //把 ul 放到 div2 标签里面
   }
   </script>
</body>

原图：


image.png

点击 add1 之后：


image.png
  • insertBefore（newNode，oldNode）方法
    在某个节点之前插入一个新节点
    两个参数：
    要插入的节点
    在谁之前插入
    插入 一个节点，节点不存在，创建：
    1.创建标签
    2.创建文本
    3.把文本添加到标签下面

代码展示：

<body>
       <ul id="ul1">
           <li id="li1">tom</li>
           <li id="li2">mary</li>
           <li id="li3">jack</li>
           <li id="li4">aaaa</li>
       </ul>

   <input type="button" value="add1" onclick="insert()"/>
   <script type="text/javascript">
   function insert(){
       var  li2=document.getElementById("li3");   //获取要插入的标签
       var li5=document.createElement("li");   //创建插入的标签
       var text5=document.createTextNode("cccc");  //创建插入文本
       li5.appendChild(text5);    //把文本添加到 li 标签上
       var ul=document.getElementById("ul1");  //获取 ul 标签
       ul.insertBefore(li5,li3);   //在 li3 前面添加 li5
   }
   </script>
</body>

添加后的效果：

image.png

不存在 没有 insertAfter（）方法

6.操作 DOM 树二

  • removeChild方法：删除节点
    通过父节点删除，不能自己删除自己
<body>
       <ul id="ul1">
           <li id="li1">tom</li>
           <li id="li2">mary</li>
           <li id="li3">jack</li>
           <li id="li4">aaaa</li>
       </ul>

   <input type="button" value="remove" onclick="remove()"/>
   <script type="text/javascript">
   function remove(){
       var  li3=document.getElementById("li3");  //获取删除的标签
       var ul=document.getElementById("ul1");   //获取 ul 标签
       ul.removeChild(li3);    //删除标签
   }
   </script>
</body>
  • replaceChild （newNode，oldNode）发法：替换节点
    不能自己替换自己，通过父节点替换
    两个参数
    第一个参数：新的节点（替换成的节点）
    第二个参数：旧的节点（被替换的节点）

代码展示：

<body>
       <ul id="ul1">
           <li id="li1">tom</li>
           <li id="li2">mary</li>
           <li id="li3">jack</li>
           <li id="li4">aaaa</li>
       </ul>

   <input type="button" value="replace" onclick="replace()"/>
   <script type="text/javascript">
   function replace(){
       var  li3=document.getElementById("li3");
       var li5=document.createElement("li");
       var text5=document.createTextNode("aiaiaiaiai");
       li5.appendChild(text5);

       var ul=document.getElementById("ul1");
       ul.replaceChild(li5,li3);
   }
   </script>
</body>

点 替换之前：


image.png

点替换之后：


image.png
  • cloneNode（boolean）：复制节点
    把 ul 列表复制到另一个 div 里面

代码展示：

<body>
    <style type="text/css">
        #div1 {
            width: 200px;
            height: 150px;
            border: 1px solid goldenrod;
    
        }
    
        #div2 {
            margin-top: 10px;
            width: 200px;
            height: 250px;
            border: 1px solid green;
    
        }
    </style>
    <div id="div1">
        <ul id="ul1">
            <li>tom</li>
            <li>mary</li>
            <li>jack</li>
        </ul>
    </div>
    <div id="div2">
    
    </div>
   <input type="button" value="copy" onclick="copy()"/>
   <script type="text/javascript">
   function copy(){
       var ul=document.getElementById("ul1");   //获取 ul 标签
       var copy=ul1.cloneNode(true);   //把 ul 标签里面的内容复制到 copy 里
       var div=document.getElementById("div2");   //获取 div
       div.appendChild(copy); //把复制的内容放到新的 div 里面
   }
   </script>
</body>

复制之前：


image.png

点击 copy 两遍之后：

image.png

操作 DOM 总结

  • 获取节点使用方法
    getElementById（）：通过节点的 id 属性，查找对应节点
    getElementsByName（）：通过节点的 name 属性，查找对应的节点
  • 插入节点的方法
    insertBefore（）：在某个节点之前插入
    appendChild（）：在末尾添加，剪贴黏贴
  • 删除节点的方法
    removeChild（）：通过父节点删除
  • 替换节点方法
    replaceChild（）：通过父节点替换

6.innerHTML 属性

这个属性不是 dom 的组成部分，但是大多数浏览器都支持的属性
第一个作用：获取文本内容

<span  id="sid" >aaaa</span>
var span1=document.getElementById（“sid”）;
alert（span1.innerHTML）；//aaaa

第二个作用：向标签里面设置内容（可以是 html 代码）
向 div 里面设置内容<h1>AAAA</h1>

var div1=document.getElementById（“div1”）；
div1.innerHTML="<h1>AAAA</h1>"

练习：向 div 里面添加一个表格

var tab="<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbbb</td></tr><tr><td>ccccc</td></tr><table>
//或者
var tab="<table>";
tab+="</table>; //相当于 var tab="<table></table>";
div1.innerHTML=tab;

7.动态显示时间

1.得到当前的时间
2.需要让页面每一秒获取时间
3.显示到页面上
代码：

<body>
    <div id="div1">
    
    </div>
   <script type="text/javascript">
   function getD1(){
       var date=new Date();  //获取当前时间
       var d1=date.toLocaleString();//显示出自己想要的效果
       var div=document.getElementById("div1");
       div.innerHTML=d1; //放获取到的时间显示到页面上
   }
   setInterval("getD1();",1000); //每一秒调用一下 getD1() 方法
   </script>
</body>

8.案例：全选练习

复选框 <input type="checkbox" />
属性：checked=true 已选择 checked=false 未选择
创建一个页面

  • 复选框和按钮
    四个复选框表示爱好
    还有一个复选框操作 全选和全不选，也有一个事件
  • 三个按钮，分别有事件
    全选
    全不选
    反选

代码：

<body>
    <input type="checkbox" id="boxid"  onclick="selAllNo()"/>全选/全不选
    <br/>
    <input type="checkbox" name="love"/>篮球<br>
    <input type="checkbox" name="love" />排球<br>
    <input type="checkbox" name="love" />羽毛球<br>
    <input type="checkbox" name="love" />乒乓球<br>
    <br>
    <input type="button" value="全选" onclick="selall()"/>
    <input type="button" value="全不选" onclick="selno()" />
    <input type="button" value="反选" onclick="selother()" />
   <script type="text/javascript">
   //全选/全不选
   function selAllNo() {
      var box=document.getElementById("boxid");
       if(box.checked==true){
           selall();
       }
       else{
           selno();
       }
    }
   //全选
   function selall(){
       var loves=document.getElementsByName("love");
       for(var i=0;i<loves.length;i++){
          loves[i].checked=true;
       }
   }
  //全不选
    function selno() {
        var loves = document.getElementsByName("love");
        for (var i = 0; i < loves.length; i++) {
            loves[i].checked = false;
        }
    }
    //反选
    function selother() {
        var loves = document.getElementsByName("love");
        for (var i = 0; i < loves.length; i++) {
            if(loves[i].checked ==true){
                loves[i].checked =false;
            }
            else{
                loves[i].checked =true;
            }
        }
    }
   </script>
</body>

效果展示：


image.png

9.案例：下拉列表左右选择

下拉选择框

<select>
      <option>111</option>
       <option>111</option>
</select>
  • 创建一个页面
    两个下拉选择框
    ——设置属性 multiple 属性 ( 没有下拉线，全部展示）
    四个按钮，有事件.

获取子标签的唯一方法

<select id="select1" multiple="multiple" style="width: 100px;height: 100px;">
        <option>AAAAAA</option>
        <option>BBBBBB</option>
        <option>CCCCCC</option>
        <option>DDDDDD</option>
        <option>EEEEEE</option>
    </select>

var select1 = document.getElementById("select1");
var options = select2.getElementsByTagName("option");

代码展示：

<body>
<div>
    <select id="select1" multiple="multiple" style="width: 100px;height: 100px;">
        <option>AAAAAA</option>
        <option>BBBBBB</option>
        <option>CCCCCC</option>
        <option>DDDDDD</option>
        <option>EEEEEE</option>
    </select>
    <br><br>
      <input type="button" value="选中添加到右边" onclick="seltoright()" /><br>
      <input type="button" value="全部添加到右边" onclick="alltoright()"/>
</div>
<div style="margin-left: 140px;;margin-top: -164px">
    <select id="select2" multiple="multiple" style="width: 100px; height:100px;">
       <option>QQQQQQ</option>
    </select>
<br><br>
       <input type="button" value="选中添加到左边" onclick="seltoleft()" /><br>
       <input type="button" value="全部添加到左边" onclick="alltoleft()" />
    </div>

    <script text="text/javascript">
    //部分添加到右边
       function seltoright(){
           var select2=document.getElementById("select2");
           var select1=document.getElementById("select1");
           var options=select1.getElementsByTagName("option");
         for(var i=0;i<options.length;i++){
             if(options[i].selected==true){
                 select2.appendChild(options[i]);
                i--;
             }
         }
       }
       //全部添加到右边
        function alltoright() {
                var select2 = document.getElementById("select2");
                var select1 = document.getElementById("select1");
                var options = select1.getElementsByTagName("option");
                for (var i = 0; i < options.length; i++) { 
                    select2.appendChild(options[i]);   
                        i--;
                }
            }
        //选中添加到左边
           function seltoleft() {
                var select2 = document.getElementById("select2");
                var select1 = document.getElementById("select1");
                var options = select2.getElementsByTagName("option");
                for (var i = 0; i < options.length; i++) {
                    if (options[i].selected == true) {
                        select1.appendChild(options[i]);
                        i--;
                    }
                }
            }
        //全部添加到左边
              function alltoleft() {
                    var select2 = document.getElementById("select2");
                    var select1 = document.getElementById("select1");
                    var options = select2.getElementsByTagName("option");
                    for (var i = 0; i < options.length; i++) {
                        select1.appendChild(options[i]);
                        i--;
                    }
                }
    </script>
</body>

效果展示：

image.png

10.案例：省市联动

  • 创建一个页面，有两个下拉选项框
  • 在第一个下拉框里面有一个事件：改变事件 onchange 事件
    方法 add1(this.value);表示当前改变的 option 里面的 value值
  • 创建一个二维数组，存储数据

代码展示：

<body>
    <select id="country" onchange="add1(this.value);">
        <option value="0">---请选择---</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="德国">德国</option>
        <option value="日本">日本</option>
    </select>
    <select id="city">
    </select>
    <script text="text/javascript">
    var arr=new Array(4); //二维数组：数组里面再套一个数组
    arr[0] = ["中国","南京","宝鸡","西安","上海","北京"];
    arr[1] = ["美国", "花盛顿", "底特律", "休斯顿", "纽约"]; 
    arr[2] = ["德国", "慕尼黑", "柏林", "法兰克福", "狼堡"]; 
    arr[3] = ["日本", "东京", "北海道", "大扳", "广岛", "长崎"];

    function add1(val){
        var city1=document.getElementById("city");
        //每次在 city 里面添加都会叠加，所以每次添加之前要判断是否为空
        var options1=city1.getElementsByTagName("option");
        for(var i=0;i<options1.length;i++){
            city1.removeChild(options1[i]);
            i--;
        }
        //city 添加元素
         for(var i=0;i<arr.length;i++){
            var arr1=arr[i];
            var firstval=arr1[0];
            if(firstval==val){
                for(var j=1;j<arr1.length;j++){
                  var option1=document.createElement("option");
                  var text1=document.createTextNode(arr1[j]);
                  option1.appendChild(text1);
                  city1.appendChild(option1);
                }
            }
         }
    }
    </Script>
</body>

效果展示：


image.png

11.案例：生成动态表格

创建一个页面，两个输入框和一个按钮
代码展示：

<body>
    行：<input type="text" id="hang" />
    列：<input type="text" id="lie" /><br>
    <input type="button" value="生成" onclick="add2();" />
    <div id="divv">

    </div>

    <script type="text/javascript" />
    function add2() {
        var h=document.getElementById("hang").value;
        var l=document.getElementById("lie").value;
        //自动添加行和列
        var tab="<table border='1'  bordercolor='blue'>";
        for(var i=0;i<h;i++){
           tab+="<tr>";
           for(var j=0;j<l;j++){
                tab+="<td>aaaaaa</td>";
          }
           tab+="</tr>";
        }
        tab+="</table>";
        document.getElementById("divv").innerHTML=tab;
    }
    </script>
</body>

效果展示：


image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,406评论 1赞 41
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,907评论 1赞 45
  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 2,825评论 0赞 8
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,272评论 0赞 21
  • 亲子日记16天
    2018-10-31 星期三 晴 估计，也只有我这个点才写日记了， 今下午明宇不舒服，老是呕吐，带他去...
    明宇明涵妈妈阅读 190评论 0赞 0