DOM

最新推荐文章于 2019-05-17 16:49:47 发布

「已注销」

最新推荐文章于 2019-05-17 16:49:47 发布

阅读量238

点赞数

分类专栏： JavaScript 文章标签： DOM

本文链接：https://blog.csdn.net/sinat_37976731/article/details/79724527

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM

DOM是文档对象模型（Document Object Model）的简称。当网页加载时，可将结构化文档在内存中转化为对象的树。

这里写图片描述

DOM中的节点

文档可以说是由节点构成的集合。在DOM模型中有以下三种节点：

元素节点：各种标签就是这些元素节点的名称，例如<p>、<ul>等
文本节点：文本节点总是被包含在元素节点的内部
属性节点：一般用来修饰元素节点就称之为属性节点

例如：

在这里，a为元素节点，title和href为属性节点，百度即为文本节点。

DOM对HTML元素访问操作

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

根据ID访问HTML元素——通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
利用节点关系访问HTML元素。常用的属性和法如下：

属性	含义
parentNode	返回当前节点的父节点。
previousSibling	返回当前节点的前一个兄弟节点。
nextSibling	返回当前节点的后一个兄弟节点。
childNodes	返回当前节点的所有子节点
firstChild	返回当前节点的第一个子节点
lastChild	返回当前节点的最后一个子节点
getElementsByTagName(tagName) (注意其中的s)	返回当前节点的具有指定标签名的所有子节点

根据ID访问元素示例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function show(){
        var myDiv, txtName, content;
        with(document){
            myDiv=getElementById("myDiv");
            txtName=getElementById("txtName");
            content=getElementById("content");
        }
        alert(myDiv.innerHTML+"\n"+content.value+"\n"+txtName.value);
    }
</script>

</head>
<body>
    <div id="myDiv">我的DIV块</div>
    <textarea id="content" rows="3" cols="25">好好学习，天天向上</textarea><br />
    <input id="txtName" type="text" value="小李" /><br />
    <input id="btn_show" type="button" value="访问三个元素的内容" onclick="show()">
</body>

根据节点关系访问元素示例

</head>
<body>
    <ul id="names">
        <li id="n1">小白</li>
        <li id="n2">小黑</li>
        <li id="n3">小兰</li>
        <li id="n4">小紫</li>
        <li id="n5">小橙</li>
        <li id="n6">小青</li>
    </ul>

    <input type="button" value="父节点" onclick="show(current.parentNode)" />
    <!-- 由于火狐跟谷歌浏览器总是将换行也作为一个子节点，因此firstChild总是undefined -->
    <input type="button" value="第一个子节点" onclick="show(current.parentNode.firstChild.nextSibling)"/>
    <input type="button" value="上一个节点" onclick="show(current.previousSibling.previousSibling)"/>
    <input type="button" value="下一个节点" onclick="show(current.nextSibling.nextSibling)"/>
    <input type="button" value="最后一个子节点" onclick="show(current.parentNode.lastChild.previousSibling)"/>
    <input type="button" value="得到所有li元素的个数" onclick="showCount()"/>

    <script type="text/javascript">
    /*由于js是解释性语言，所以HTML尚未加载完是找不到n4这个元素的，因此可以放在后面或者等HTML页面加载完*/
    var current=document.getElementById("n4"); /*基点*/
    function show(target){
        alert(target.innerHTML);
    }

    function showCount(){
        alert(document.getElementsByTagName("li").length);
    }
    </script>
</body>

DOM访问form表单

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

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

在elements返回的数组中访问具体的表单控件语法

方式	含义
.elements[index]	返回该表单控件中第index个控件
.elements[elementName]	返回表单内id或name为elementName的表单控件
.elementName	返回表单内id或name为elementName的表单控件

访问表单示例

<script type="text/javascript">
    function operateForm(){
        /*得到此页面所有form的集合，取第一个*/
        var form=document.forms[0];
        //alert(form.action);
        //alert(form.method);
        //alert(form.target);

        //在js里提交表单
        //form.submit();
        //form.reset();
    }
</script>

</head>
<body>

    <form id="myForm" action="http://www.baidu.com" method="get" target="_blank">
        <input name="userName" type="text" value="小D" /><br />
        <input name="password" type="text" value="123456789" /><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);" />
        <input type="button" value="获取表单内第二个控件" onclick="alert(document.getElementById('myForm').elements['password'].value);"/>
        <input type="button" value="获取表单内第三个控件" onclick="alert(document.getElementById('myForm').city.value);" />
        <input type="button" value="操作表单" onclick="operateForm()"/>
    </form>

</body>

DOM访问列表框、下拉表

DOM返回列表框、下拉菜单的常用属性如下：

方式	含义
form	返回下拉菜单、列表框所在的表单对象
length	返回下拉菜单、列表框所在的选项个数
options	返回下拉菜单、列表框里所有选项组成的数组
selectedIndex	返回下拉列表中选中选项的索引
type	返回下拉列表的类型，多选的话返回select-multiplt，单选返回select-one

使用options[index]返回具体选项所对应的常用属性：

方式	含义
defaultSelected	返回该选项默认是否被选中
index	返回该选项在下拉菜单、列表框中的索引
selected	返回该选项是否被选中
text	返回该选项呈现的文本
value	返回该选项的value属性值

DOM访问访问表格

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

属性	意义
caption	访问表格的标题对象
rows	返回表格里所有表格行
tbodies	返回该表格里所有tbody元素组成的数组
tfoot	返回该表格里所有tfoot元素
thead	返回该表格里所有thead元素

通过rows[index]返回表格指定的行所对应的属性

属性	意义
cells	返回表格行内所有的单元格组成的数组
rowIndex	返回该表格行所在表格内的索引值
sectionRowIndex	返回该表格行在所其在元素（tbody, thead等元素）内的索引值

通过cells[index]返回表格指定的列所对应的属性

属性	意义
cellIndex	返回该单元格在表格行内所在的索引值
rowIndex	返回该表格行所在表格内的索引值
sectionRowIndex	返回该表格行在所其在元素（tbody, thead等元素）内的索引值

访问表格示例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function update(){
        var row=document.getElementById("row").value;
        var cell=document.getElementById("cel").value;
        var t=document.getElementById("myTable");
        t.rows[row-1].cells[cell-1].innerHTML=document.getElementById("course").value;
    }
</script>

</head>
<body>

    <table id="myTable" border="1px">
        <caption>编程</caption>
        <tr>
            <td>C</td>
            <td>C++</td>
        </tr>
        <tr>
            <td>LSD</td>
            <td>ARM</td>
        </tr>
        <tr>
            <td>J2EE</td>
            <td>Android</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="course" size="10" />
    <input type="button" id="btn_set" value="修改" onclick="update()" /> 

</body>

动态添加、删除表格内容所使用到的常用方法

方法	意义
insertRow(index)	在指定索引位置插入一行
createCaption()	为该表格创建标题
createTFoot()	为该表格创建〈tfoot …/〉元素，假如已存在就返回现有的
createTHead()	为该表格创建〈thead …/〉元素，假如已存在就返回现有的
deIeteRow(index)	删除表格中index索引处的行
deIeteCaption()	删除表格标题
deIeteTFoot()	从表格删除tFoot元素及其内容
deleteTHead()	从表格删除tHead元素及其内容

给表格行创建、删除单元格方法

方法	意义
insertCell(index)	在index处创建一个单元格，返回新建的单元格
deleteCell(index)	删除某行在index处的单元格

示例


<script type="text/javascript">
    function createTable(){
        //获取body标签的id
        var b=document.getElementById("test");

        /*跟据标签名称创建元素*/
        var t=document.createElement("table");
        t.border="1";
        t.id="myTable";
        var caption=t.createCaption();
        caption.innerHTML="我的表格";
        for(var i=0; i<5; i++){
            var tr=t.insertRow(i);
            for(var j=0; j<4; j++){
                var td=tr.insertCell(j);
                td.innerHTML="单元格"+i+j;
            }
        }

        b.appendChild(t);
    }

    function deleteLastRow(){
        var t=document.getElementById("myTable");
        if(t.rows.length>0){
            t.deleteRow(t.rows.length-1);
        }
    }

    function deleteLastCell(){
        var t=document.getElementById("myTable");
        var lastRow=t.rows[t.rows.length-1];
        if(lastRow.cells.length>0){
            lastRow.deleteCell(lastRow.cells.length-1);
        }
    }
</script>

</head>

<body id="test">

    <input type="button" value="创建一个五行四列" onclick="createTable();" />

    <input type="button" value="删除最后一行" onclick="deleteLastRow();" />

    <input type="button" value="删除最后一个单元格" onclick="deleteLastCell();" />

</body>

DOM对HTML元素的增、删、改操作

DOM创建节点的方法

document.createElement(Tag)，Tag必须是合法的HTML元素。

DOM复制节点的方法

节点cloneNode(boolean deep), 当deep为true时，表示复制当前节点以及当前节点的全部后代节点（深复制）；为false时，只复制当前节点（浅复制）。

DOM删除节点的方法

方法	含义
appendChild(newNode)	将newNode节点添加成当前节点的最后一个子节点
insertBefore(newNode, refNode)	在refNode节点之前插入newNode节点
replaceChild(newNode, oldNode)	将oldNode替换成newNode节点
removeChild(oldNode)	将oldNode子节点删除

示例

<script type="text/javascript">
    function create(){
        var city=document.getElementById("city");
        var element=document.createElement("li");
        element.innerHTML="深圳";

        //在末尾添加
        //city.appendChild(element);

        //插入
        //city.insertBefore(element, city.firstChild.nextSibling);

        //替换
        city.replaceChild(element, city.firstChild.nextSibling);
    }

    function copy(){
        var city=document.getElementById("city");

        //为false时值只复制这个元素节点，不复制其他（如内容）
        var element=city.firstChild.nextSibling.cloneNode(true);
        city.appendChild(element);
    }

    function del(){
        var city=document.getElementById("city");
        var element=city.firstChild.nextSibling;
        city.removeChild(element);
    }
</script>

</head>

<body>

    <ul id="city">
        <li>北京</li>
        <li>上海</li>
    </ul>

    <input type="button" value="创建复制替换节点" onclick="create();" />

    <input type="button" value="复制节点" onclick="copy();" />

    <input type="button" value="删除节点" onclick="del();" />

</body>

DOM为列表框、下拉菜单添加选项的方式

创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。语法如下：

new Option(text, value, defaultSelected, selected)

该构造器有四个参数，说明如下：

text：该选项的文本，即该选项所呈现的“内容”;
value：选中该选项的值（传递）
defaultSelected：设置默认是否显示该选项
selected：设置该选项当前是否被选中

并不是每一次构造都需要指定四个参数，可以指定一个两个都可以，指定的参数按照参数列表的顺序来。

添加创建好的选项至列表框或下拉菜单的方式

直接为<select …/>的指定选项赋值

列表框或下拉菜单对象.options[i]=创建好的option对象

删除列表框或下拉菜单选项的方式

直接使用列表框或下拉菜单对象.remove(index)方法删除指定的选项。
直接将指定的选项赋值为null。

示例

<script type="text/javascript">
    function createSelect(){
        var element=document.createElement("select");
        for(var i=0; i<10; i++){
            var op=new Option("新增的选项"+i, i);
            element.options[i]=op;
        }
        element.size=5;
        element.id="city";
        document.getElementById("test").appendChild(element);
    }

    function delOneByOne(){
        var city=document.getElementById("city");
        if(city.options.length>0){
            //city.remove(city.options.length-1);
            city.options[city.options.length-1]=null;
        }
    }

    function clearAll(){
        var city=document.getElementById("city");
        if(city.options.length>0){
            city.options.length=0;
        }       
    }
</script>

</head>

<body id="test">

    <input type="button" value="创建一个城市列表框" onclick="createSelect();" />
    <input type="button" value="一条条删除列表框" onclick="delOneByOne();" />
    <input type="button" value="一次性清空列表框内容" onclick="clearAll();" />

</body>

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM

DOMDOM是文档对象模型（Document Object Model）的简称。当网页加载时，可将结构化文档在内存中转化为对象的树。DOM中的节点文档可以说是由节点构成的集合。在DOM模型中有以下三种节点：元素节点：各种标签就是这些元素节点的名称，例如&lt;p&gt;、&lt;ul&gt;等文本节点：文本节点总是被包含在元素节点的内部属性节点：一般用来修饰元素节点就称之...
复制链接

扫一扫