• JavaScript之DOM文档对象模型--对HTML元素的访问操作


    1、DOM是文档对象模型(Document Object Model)的简称。

    当网页加载时,可以将结构化文档在内存中转换成对象树。

    简单的说,DOM并不是一种技术,而是一种访问结构化文档的思想。借助DOM模型,我们可以对DOM树进行修改、删除、新增等操作,让结构化文档动态化。

    2、DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点:

    (1)元素节点:各种标签就是这些元素节点的名称,如<ul>、<p>等;

    (2)文本节点:文本节点总是被包含在元素节点的内部;

    (3)属性节点:一般用来修饰元素节点的就称之为属性节点。

    3、DOM对HTML元素的访问操作:

    为了动态地修改HTML元素,须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素:

    (1)根据ID访问HTML元素--通过document对象调用getElementById()方法来查找具有唯一id属性值的元素;

    如下例子:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="name" content="content">
            <title>DOM-使用getElementById方法查找元素</title>
            <script type="text/javascript">
                function showContent(){
                    var myDiv,content,txtName;
                    with(document){
                        myDiv=getElementById("myDiv");
                        content=getElementById("content");
                        txtName=getElementById("txtName");
                    }
                    alert(myDiv.innerHTML+"
    "+content.value+"
    "+txtName.value);
                }
            </script>
        </head>
        <body>
            <div id="myDiv">我的div块</div>
            <textarea id="content" rows="3" cols="25">好好学习,天天向上</textarea><br>
            <input type="text" id="txtName" value="chen"><br>
            <input type="button" id="btn_show" value="访问3个元素的内容" onclick="showContent()"><br>
        </body>
    </html>

    (2)利用节点关系访问HTML元素。常用的属性和方法如下:

    parentNode:返回当前节点的父亲节点;
    previousSibling:返回当前节点的前一个兄弟节点;
    nextSibling:返回当前节点的后一个兄弟节点;
    childNode:返回当前节点的所有子节点;
    firstChild:返回当前节点的第一个子节点;
    lastChild:返回当前节点的最后一个子节点;
    getElementsByTagName(tagName):返回当前节点的具有指定标签名的所有子节点。

    如下例子:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #n4{color:red;}
            </style>
    
        </head>
        <body>
            <ul id="names">
                <li id="n1">Bob</li>
                <li id="n2">PJ</li>
                <li id="n3">Teddy</li>
                <li id="n4">Chariel</li>
                <li id="n5">Gabe</li>
                <li id="n6">Dorra</li>
            </ul>
            <input type="button" value="父节点" onclick="showContent(current.parentNode)">
            <input type="button" value="第一个子节点" onclick="showContent(current.parentNode.firstChild.nextSibling)">
            <!--注意:在火狐谷歌浏览器里面,换行也会被认为是子节点,
            如果没有加nextSibling,在火狐谷歌浏览器输出的结果会是undefined-->
            <input type="button" value="上一个节点" onclick="showContent(current.previousSibling.previousSibling)">
            <input type="button" value="下一个节点" onclick="showContent(current.nextSibling.nextSibling)">
            <input type="button" value="最后一个子节点" onclick="showContent(current.parentNode.lastChild.previousSibling)">
            <input type="button" value="得到所有li元素的个数" onclick="showCount()">
    
            <script type="text/javascript">
                var current=document.getElementById("n4");
                function showContent(target){
                    alert(target.innerHTML);
                }
                /*若是将JavaScript代码放在head标签中,那么会报错:Cannot read property 'parentNode' of null
                  因为JavaScript是解析执行的,HTML会从上面的标签往下执行,
                  语句“var current=document.getElementById("n4");”没有放在函数中,还没有解析到ul标签,就去找n4了,
                  所以会出错。解决方法之一是将JavaScript代码放在最后面,就是放在</body>前面。
                  还有一种解决方法就是先让HTML结构加载完毕之后再执行。
                */
               function showCount(){
                    alert(document.getElementsByTagName("li").length);
               }
            </script>
        </body>
    </html>

    4、DOM访问表单控件的常用属性和方法如下:

    action:返回该表单的提交地址;
    method:返回表单内的method属性,主要有post和get两个值;
    target:确定提交表单时的结果窗口,主要有"_self"、"_blank"、"_top"等;
    elements:返回表单内全部表单控件所组成的数组,通过数组可以访问表单内的任何表单控件;
    length:返回表单内表单域的个数;
    reset()、submit():重置表单和确定表单方法。

    --------------------------------------------------------------

    在elements返回的数组中访问具体的表单控件语法如下:
    .elements[index]:返回该表单中第index个表单控件;
    .elements[elementName]:返回表单内id或name为elementName的表单控件;
    .elementName:返回表单内id或name为elementName的表单控件。

    ----------------------------------------------------------------

    如下例子:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>提交表单控件</title>
            <script type="text/javascript">
                function operatorForm(){
                    var myForm=document.forms[0];//document.forms可以得到所有表单,即表单数组
                    alert(myForm.action);
                    alert(myForm.method);
                    alert(myForm.target);
                    myForm.submit();
                }
                /*总结:DOM访问表单控件常用的属性和方法如下:
                  action:返回该表单的提交地址;
                  method:返回表单内的method属性,主要有post和get两个值;
                  target:确定提交表单时的结果窗口,主要有"_self"、"_blank"、"_top"等;
                  elements:返回表单内全部表单控件所组成的数组,通过数组可以访问表单内的任何表单控件;
                  length:返回表单内表单域的个数;
                  reset()、submit():重置表单和确定表单方法。
    
                  在elements返回的数组中访问具体的表单控件语法如下:
                  .elements[index]:返回该表单中第index个表单控件;
                  .elements[elementName]:返回表单内id或name为elementName的表单控件;
                  .elementName:返回表单内id或name为elementName的表单控件。
                */
            </script>
        </head>
        <body>
            <form id="myForm" action="#" method="get" target="_self">
                <input type="text" name="userName" value="chen"><br>
                <input type="text" name="password" value="123456"><br>
                <select name="city">
                    <option value="shanghai">上海</option>
                    <option value="nanjing" selected="selected">南京</option>
                </select><br>
                <input type="button" value="获取表单内的第一个控件" onclick="alert(document.getElementById('myForm').elements[0].value);"><br>
                <input type="button" value="获取表单内的第二个控件" onclick="alert(document.getElementById('myForm').elements['password'].value);"><br>
                <input type="button" value="获取表单内的第三个控件" onclick="alert(document.getElementById('myForm').city.value);"><br>
                <input type="button" value="操作表单" onclick="operatorForm()"><br>
            </form>
        </body>
    </html>

    5、DOM访问列表框、下拉菜单的常用属性:

    form:返回列表框、下拉菜单所在的表单对象;
    length:返回列表框、下拉菜单的选项个数;
    options:返回列表框、下拉菜单里所有的选项组成的数组;
    selectedIndex:返回下拉列表中选中项的索引;
    type:返回下拉列表的类型,多选的话返回select-multiple,单选返回select-one。
    -----------------------------------------------------------------------------------------------
    使用options[index]返回具体选项所对应的常用属性:
    defaultSelected:返回该选项默认是否被选中;
    index:返回该选项在列框、下拉菜单中的索引;
    selected:返回该选项是否被选中;
    text:返回该选项呈现的文本;
    value:返回该选项的value属性值。

    ------------------------------------------------------------------------

    如下例子:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>查找列表框、下拉菜单控件</title>
            <!---->
        </head>
        <body>
            <select id="city" name="city" size="5">
                <option value="beijing">北京</option>
                <option value="shanghai" selected="selected">上海</option>
                <option value="hangzhou">杭州</option>
                <option value="xian">西安</option>
                <option value="shenzhen">深圳</option>
                <option value="guangzhou">广州</option>
            </select><br>
            <input type="button" value="第一个城市" onclick="change(s_city.options[0])">
            <input type="button" value="上一个城市" onclick="change(s_city.options[s_city.selectedIndex-1])">
            <input type="button" value="下一个城市" onclick="change(s_city.options[s_city.selectedIndex+1])">
            <input type="button" value="最后一个城市" onclick="change(s_city.options[s_city.length-1])">
    
            <script type="text/javascript">
                var s_city=document.getElementById("city");
                var change=function(city){
                    alert(city.text);//text返回的是该选项呈现的文本,若是value则返回该选项的value属性值
                }
    
                /*总结:DOM访问列表框、下拉菜单的常用属性如下:
                  form:返回列表框、下拉菜单所在的表单对象;
                  length:返回列表框、下拉菜单的选项个数;
                  options:返回列表框、下拉菜单里所有的选项组成的数组;
                  selectedIndex:返回下拉列表中选中项的索引;
                  type:返回下拉列表的类型,多选的话返回select-multiple,单选返回select-one。              
    
                  使用options[index]返回具体选项所对应的常用属性:
                  defaultSelected:返回该选项默认是否被选中;
                  index:返回该选项在列框、下拉菜单中的索引;
                  selected:返回该选项是否被选中;
                  text:返回该选项呈现的文本;
                  value:返回该选项的value属性值。
                */
            </script>
        </body>
    </html>

    6、DOM访问表格子元素的常用属性和方法如下:

    caption:返回表格的标题对象;
    rows:返回该表格里的所有表格行;
    tbodies:返回该表格里所有<tbody.../>元素组成的数组;
    tfoot:返回该表格里所有<tfoot.../>元素;
    thead:返回该表格里所有<thead.../>元素。

    通过rows[index]返回表格指定的行所对应的属性:
    cells:返回该表格行内所有的单元格组成的数组;
    rowIndex:返回该表格行在表格内的索引值;
    sectionRowIndex:返回该表格行在其所在元素(tbody、thead等元素)的索引值。

    通过cells[index]返回表格指定的列所对应的属性:
    cellIndex:返回该单元格在表格行内的索引值。

    例子如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>查找表单控件</title>
            <script type="text/javascript">
                function update(){
                    var row=document.getElementById("row").value;
                    var cel=document.getElementById("cel").value;
                    var t=document.getElementById("myTable");
                    //t.rows[row-1].cells[cel-1].innerHTML=document.getElementById("content").value;
                    t.rows.item(row-1).cells.item(cel-1).innerHTML=document.getElementById("content").value;
                    alert("修改成功!");
                }
    
                /*总结:DOM访问表格子元素的常用属性和方法如下:
                  caption:返回表格的标题对象;
                  rows:返回该表格里的所有表格行;
                  tbodies:返回该表格里所有<tbody.../>元素组成的数组;
                  tfoot:返回该表格里所有<tfoot.../>元素;
                  thead:返回该表格里所有<thead.../>元素。
    
                    通过rows[index]返回表格指定的行所对应的属性:
                  cells:返回该表格行内所有的单元格组成的数组;
                  rowIndex:返回该表格行在表格内的索引值;
                  sectionRowIndex:返回该表格行在其所在元素(tbody、thead等元素)的索引值。
    
                    通过cells[index]返回表格指定的列所对应的属性:
                  cellIndex:返回该单元格在表格行内的索引值。
                */
            </script>
        </head>
        <body>
            <table id="myTable" border="1">
                <caption>编程语言</caption>
                <tr>
                    <td>C</td>
                    <td>C++</td>
                </tr>
                <tr>
                    <td>J2EE</td>
                    <td>Android</td>
                </tr>
                <tr>
                    <td>Web</td>
                    <td>PHP</td>
                </tr>
            </table>
            <input type="button" value="表格标题" onclick="alert(document.getElementById('myTable').caption.innerHTML);">
            <input type="button" value="第一行、第一格" onclick="alert(document.getElementById('myTable').rows[0].cells[0].innerHTML);">
            <input type="button" value="第二行、第二格" onclick="alert(document.getElementById('myTable').rows[1].cells[1].innerHTML);">
            <input type="button" value="第三行、第二格" onclick="alert(document.getElementById('myTable').rows[2].cells[1].innerHTML);"><br>
    
            设置指定单元格的值:第<input type="text" id="row" size="2">行,
            第<input type="text" id="cel" size="2">列的值为
            <input type="text" id="content" size="10">
            <input type="button" id="btn_set" value="修改" onclick="update()">
        </body>
    </html>
  • 相关阅读:
    C# 酒鬼买酒喝,瓶盖和空瓶子可以换新的酒
    C# 图结构操作
    C# 二叉堆
    Unity 单元测试(NUnit,UnityTestTools)
    Unity PlayerPrefs类进行扩展(整个对象进行保存)
    客户端操作判断以服务器时间为准
    C# 使用枚举获取对应的数组值时
    C# 实现简单状态机(参考代码)
    叶脉图案以及藤蔓生长算法在houdini里面的实现 Leaf Venation
    steering behaviors 转向行为 集群模拟 小结
  • 原文地址:https://www.cnblogs.com/dorra/p/7339727.html
Copyright © 2020-2023  润新知