zoukankan      html  css  js  c++  java
  • JavaScript--HTML DOM

    一、基本概念

    HTML DOM 定义了访问和操作HTML文档的标准方法。
    HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
    DOM 被分为不同的部分:
      1.Core DOM   定义了一套标准的针对任何结构化文档的对象
      2.XML DOM   定义了一套标准的针对 XML 文档的对象
      3.HTML DOM   定义了一套标准的针对 HTML 文档的对象。

    节点:根据 DOM,HTML 文档中的每个成分都是一个节点。
    DOM 是这样规定的:
      >整个文档是一个文档节点
      >每个 HTML 标签是一个元素节点
      >包含在 HTML 元素中的文本是文本节点
      >每一个 HTML 属性是一个属性节点
      >注释属于注释节点

    节点彼此间都存在关系。
      >除文档节点之外的每个节点都有父节点。
      >大部分元素节点都有子节点。
      >当节点分享同一个父节点时,它们就是同辈(同级节点)。
      >节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点
      >节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点

    查找并访问节点
    你可通过若干种方法来查找您希望操作的元素:
      >通过使用 getElementById() 和 getElementsByTagName() 方法
      >通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性
      > nextSibling返回节点之后紧跟的同级节点。/ previousSibling返回节点之前紧跟的同级节点。

    节点信息
    每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
      nodeName(节点名称)
      nodeValue(节点值)
      nodeType(节点类型)

    nodeName 属性含有某个节点的名称。
      元素节点的 nodeName 是标签名称
      属性节点的 nodeName 是属性名称
      文本节点的 nodeName 永远是 #text
      文档节点的 nodeName 永远是 #document

    二、HTML DOM对象参考 

      Document: 代表整个 HTML 文档,可被用来访问页面中的所有元素   常用集合属性:forms
      Anchor : 代表 <a> 元素
      Area : 代表图像映射中的 <area> 元素
      Base : 代表 <base> 元素
      Body : 代表 <body> 元素
      Button : 代表 <button> 元素
      Event : 代表某个事件的状态
      Form : 代表 <form> 元素
      Frame : 代表 <frame> 元素
      Frameset: 代表 <frameset> 元素
      Iframe : 代表 <iframe> 元素
      Image : 代表 <img> 元素
      Input button : 代表 HTML 表单中的一个按钮
      Input checkbox : 代表 HTML 表单中的复选框
      Input file : 代表 HTML 表单中的文件上传
      Input hidden : 代表 HTML 表单中的隐藏域
      Input password : 代表 HTML 表单中的密码域
      Input radio : 代表 HTML 表单中的单选按钮
      Input reset : 代表 HTML 表单中的重置按钮
      Input submit : 代表 HTML 表单中的确认按钮
      Input text : 代表 HTML 表单中的文本输入域(文本框)
      Link : 代表 <link> 元素
      Meta : 代表 <meta> 元素
      Object : 代表 <Object> 元素
      Option : 代表 <option> 元素
      Select : 代表 HTML 表单中的选择列表
      Style : 代表单独的样式声明
      Table : 代表 <table> 元素
      TableData : 代表 <td> 元素
      TableRow : 代表 <tr> 元素
      Textarea : 代表 <textarea> 元

    实例:遍历绑定事件

     1 <script type="text/javascript">
     2             //获取网页中所有的li节点
     3             var list = document.getElementsByTagName("li");
     4             document.write("LI节点总数量:"+list.length+"<br/>");
     5             
     6             //获取ul中的所有li节点
     7             var list2 = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
     8             document.write("UL中LI节点数量:"+list2.length+"<br/>");
     9             
    10             //获取ol中的所有li子节点
    11             var list3 = document.getElementById("oid").getElementsByTagName("li");
    12             document.write("OL中LI节点数量:"+list3.length+"<br/>");
    13             
    14             //为ul中的li节点绑定点击事件
    15             for(var i=0;i<list2.length;i++){
    16                 list2[i].onclick = function(){
    17                     alert(this.innerHTML);
    18                     //获取当前li节点的父节点ul并设置样式
    19                     this.parentNode.style.color = this.innerHTML;
    20                 }
    21             }
    22         </script>
     1 <body>
     2         <h3 id="hid">JavaScript的HTML DOM实例--延迟加载</h3>
     3         <img src="./images/HLL-11_xuandong.gif" res="./images/11.jpg"/>
     4         <img src="./images/HLL-11_xuandong.gif" res="./images/22.jpg"/>
     5         <img src="./images/HLL-11_xuandong.gif" res="./images/33.jpg"/>
     6         <img src="./images/HLL-11_xuandong.gif" res="./images/44.jpg"/>
     7         <script type="text/javascript">
     8             //定时调用
     9             setTimeout(function(){
    10                 //获取网页中所有的图片标签
    11                 var list = document.images;
    12                 //遍历处理
    13                 for(var i=0;i<list.length;i++){
    14                     list[i].src = list[i].getAttribute("res");
    15                     list[i].width = 100;
    16                 }
    17             },3000);
    18             
    19             alert("当前cookie信息:"+document.cookie);
    20         </script>
    21     </body>
    实例:属性修改
    <script type="text/javascript"> function dofun(){ var a = document.getElementById("aid"); //alert(a.nodeType); //获取信息 alert("地址:"+a.href+"; 名称:"+a.innerHTML+"; 提示信息:"+a.title); //改变 a.href="http://www.163.com"; a.title = "网易地址"; a.innerHTML = "网易"; } </script>

    实例:绘制图片

     1  <body>
     2         <h3>JavaScript的HTML DOM实例--canvas节点</h3>
     3         <canvas id="myCanvas"></canvas>
     4 
     5         <script type="text/javascript">
     6             var canvas=document.getElementById('myCanvas');
     7             var ctx=canvas.getContext('2d');
     8             ctx.fillStyle='#FF0000';
     9             ctx.fillRect(0,0,80,100);
    10         </script>
    11     </body>

    实例:事件冒泡

     1 <body>
     2         <h3>JavaScript的HTML DOM实例--事件的冒泡</h3>
     3         <div id="maxid" style="300px;height:300px;background-color:#ddd;">
     4             <div id="minid" style="100px;height:100px;background-color:#f0c;"></div>
     5         </div>
     6         <script type="text/javascript">
     7             var maxid = document.getElementById("maxid");
     8             var minid = document.getElementById("minid");
     9             //绑定事件
    10             maxid.onclick = function(){
    11                 alert("大div层被点击!");
    12             }
    13             
    14             
    15             minid.onclick = function(ent){
    16                 var event = ent || window.event;
    17                 alert("小div层被点击!");
    18                 
    19                 //判断浏览器
    20                 if(document.all){
    21                     //alert("IE");
    22                     event.cancelBubble = true; //阻止事件冒泡
    23                 }else{
    24                     //alert("非IE");
    25                     event.stopPropagation(); //阻止事件冒泡
    26                 }
    27                 
    28                // event.cancelBubble = true;
    29             }
    30         </script>
    31     </body>
     1 <body>
     2         <h3>JavaScript的HTML DOM实例--form表单</h3>
     3         <form action="1.html" name="myform" method="get">
     4             信息:<input type="text" name="uname"/>
     5             <input type="submit"/>
     6         </form>
     7         <br/>
     8         <button onclick="document.myform.reset();">重置</button>
     9         <button onclick="document.myform.submit();">表单外的提交</button>
    10         <button onclick="doSubmit();">改变表单提交</button>
    11         
    12         <script type="text/javascript">
    13             function doSubmit(){
    14                 var form = document.myform;
    15                 form.action = "2.html";
    16                 form.method = "post";
    17                 form.uname.value="lisi";
    18                 form.submit();
    19             }
    20         </script>
    21     </body>
     1 <body>
     2         <!-- 注释 -->
     3         <h2>JavaScript实例:HTML DOM中的Select对象</h2>
     4         <select id="sid1" size="10" multiple>
     5             <option value="0">邓丽君</option>
     6             <option value="1">张国荣</option>
     7             <option value="2">梅艳芳</option>
     8             <option value="3">黄家驹</option>
     9             <option value="4">迈克尔.杰克逊</option>
    10             <option value="5">姚贝娜</option>
    11             <option value="6">张雨生</option>
    12         </select>
    13         <div>
    14             <button onclick="doMove('sid1','sid2')">>></button>
    15             <br/><br/><br/><br/>
    16             <button onclick="doMove('sid2','sid1')"><<</button>
    17         </div>
    18         <select id="sid2" size="10" multiple></select>
    19         <script type="text/javascript">
    20             //执行下拉项的移动操作
    21             function doMove(d1,d2){
    22                //获取对应的下拉框
    23                var select1 = document.getElementById(d1);
    24                var select2 = document.getElementById(d2);
    25                //获取第一个下拉框中的所有下拉项
    26                var list = select1.options;
    27                //遍历并判断
    28                for(var i=0;i<list.length;i++){
    29                    //判断是否选中
    30                    if(list[i].selected){
    31                         list[i].selected = false; //取消选中
    32                         var ob = list[i];
    33                         select1.remove(i);
    34                         select2.add(ob);
    35                         i--;
    36                    }
    37                }
    38             }
    39             
    40             
    41         </script>
    42         
    43     </body>
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8"/>
     5         <title>JavaScript实例</title>
     6         <style>
     7             select,option,div,button{margin:0px;padding:0px;}
     8             #lid,#rid,div{
     9                 80px;
    10                 height:260px;
    11                 float:left;
    12             }
    13             div{
    14                 text-align:center;
    15                 padding-top:60px;
    16             }
    17         </style>
    18     </head>
    19     <body>
    20         <!-- html注释 -->
    21         <h2>JavaScript实例:HTML DOM 中table</h2>
    22         <table id="tid" width="500" border="1">
    23             <thead>
    24                 <tr>
    25                     <th>学号</th>
    26                     <th>姓名</th>
    27                     <th>性别</th>
    28                     <th>年龄</th>
    29                     <th>操作</th>
    30                 </tr>
    31             </thead>
    32             <tbody>
    33                 <tr>
    34                     <td>1001</td>
    35                     <td>张三</td>
    36                     <td>男</td>
    37                     <td>20</td>
    38                     <td><button onclick="dodel(this)">删除</button></td>
    39                 </tr>
    40                 <tr>
    41                     <td>1002</td>
    42                     <td>李四</td>
    43                     <td>女</td>
    44                     <td>21</td>
    45                     <td><button onclick="dodel(this)">删除</button></td>
    46                 </tr>
    47                 <tr>
    48                     <td>1003</td>
    49                     <td>王五</td>
    50                     <td>男</td>
    51                     <td>22</td>
    52                     <td><button onclick="dodel(this)">删除</button></td>
    53                 </tr>
    54             </tbody>
    55         </table>
    56         <br/><br/><br/>
    57         <h2>添加学生信息</h2>
    58         <form action="#" name="myform" onsubmit="return doAdd()">
    59             学号:<input type="text" name="sno"/><br/><br/>
    60             姓名:<input type="text" name="name"/><br/><br/>
    61             性别:<input type="text" name="sex"/><br/><br/>
    62             年龄:<input type="text" name="age"/><br/><br/>
    63             <input type="submit" value="添加"/>
    64         </form>
    65         <script type="text/javascript">
    66             //执行删除的方法
    67             function dodel(bt){
    68                 //获取表格节点
    69                 var tab = document.getElementById("tid");
    70                 tab.deleteRow(bt.parentNode.parentNode.rowIndex);
    71             }
    72             
    73             //执行添加
    74             function doAdd(){
    75                 //获取表单信息
    76                 var sno = document.myform.sno.value;
    77                 var name = document.myform.name.value;
    78                 var sex = document.myform.sex.value;
    79                 var age = document.myform.age.value;
    80                 
    81                 //获取表格并申请添加一行
    82                 var row = document.getElementById("tid").insertRow();
    83                 //为当前行添加一个个字段
    84                 row.insertCell(0).innerHTML = sno;
    85                 row.insertCell(1).innerHTML = name;
    86                 row.insertCell(2).innerHTML = sex;
    87                 row.insertCell(3).innerHTML = age;
    88                 row.insertCell(4).innerHTML = '<button onclick="dodel(this)">删除</button>';
    89                 
    90                 //当前表单清空
    91                 document.myform.reset();
    92                 
    93                 return false;
    94             }
    95         </script>
    96     </body>
    97 </html>
    View Code
  • 相关阅读:
    在VScode下搭载Perl的调试环境
    32.最长有效括号(Longest Valid Parentheses)
    23.合并K个排序链表(Merge k Sorted Lists)
    10.正则表达式匹配(Regular Expression Matching)
    4.寻找两个有序数组的中位数(Median of Two Sorted Arrays)
    C++中不引人瞩目的细节
    关于C++项目中头文件相互包含的问题
    关于css中hover下拉框的一个bug
    DFS-BFS(深搜广搜)原理及C++代码实现
    trie(字典树)原理及C++代码实现
  • 原文地址:https://www.cnblogs.com/yexiang520/p/5720016.html
Copyright © 2011-2022 走看看