DOM基本操作方法汇总

来源：互联网发布：视频加速器软件编辑：程序博客网时间：2024/06/07 03:46

最近越来越发现DOM操作是js，jquery最基本功，自己总是觉得会用起来比较吃力费时间，于是乎总结DOM基本的操作（包括js和jquery的用法），话不多说，直接切入正题。

首先，说一下自己写的整片文章的脉络，即总结js DOM基本操作的方法，然后在js，jquery在用法上进行比较举例，相信这是最让人记忆的法子。

js DOM基本操作方法

获取节点

常用获取节点的方法有：

getElementById() 功能：通过元素ID获取节点
getElementsByTagName() 功能：通过元素标签名获取节点
getElementsByName() 功能：通过元素Name属性获取节点
getElementsByClassName() 功能：通过元素类名获取节点

节点指针有：

firstChild 语法：父节点.firstChild 功能：获取节点列表第一个
lastChild 语法：父节点.lastChild 功能：获取节点列表最后一个
childNodes 语法：父节点.childNodes 功能：获取元素的子节点列表
previousSibling 语法：兄弟节点.previousSibling 功能：获取前一个节点
nextSibling 语法：兄弟节点.nextSibling 功能：获取已知节点的后一个节点
parentNode 语法：子节点.parentNode 功能：获取已知节点的父节点

节点操作

创建节点

其中节点包括元素节点、属性节点以及文本节点，当然也有注释节点，以下就前三个节点进行说明
createElement() 语法：document.createElement() 功能：创建元素节点
createAttribute() 语法：document.createAttribute() 功能：创建属性节点
createTextNode() 语法：document.createTextNode() 功能：创建文本节点

插入节点

appendChild() 语法：被添加的节点.appendChild(所添加的新节点)
insertBefore() 语法：被添加的节点.insertBefore(添加的新节点，已知节点)
替换节点
replaceChild() 语法:replace(要插入的新元素，将被替换的元素)

复制节点

cloneNode() 语法：需要被复制的节点.cloneNode(true/false)
true是指复制当前节点及其所有子节点 false是指仅复制当前节点

删除节点

removeChild() 语法：removeChild(要删除的节点)
注意：该方法可以删除指定节点及其包含的所有子节点，并返回这些内容

属性操作

属性操作分为：获取属性、设置属性、删除属性，如以下：

getAttribute() 功能：获取元素节点中指定属性的属性值
setAttribute() 功能：创建或改变元素节点的属性
removeAttribute() 功能：删除元素中指定属性

文本操作

insertData(offest,string) 从offest指定位置插入string
appendData(string) 将string插入到文本节点的末尾处
deleteData(offest,count) 从offest起删除count个字符
replace(offest,count,string) 从offest将count个字符用String替代
splitData(offset) 从offset起将文本节点分成2哥节点
subString(offset,count) 返回由offset起的count个字符串的节点。

js，jquery在用法上进行比较举例

创建节点

js用法

<script>        window.onload=function(){            var div=document.createElement("div");            var txt=document.createTextNode("DOM");            div.appendChild(txt);            document.body.appendChild(div);            div.setAttribute("title","盒子");        }    </script>

jquery用法

<script>        $(function(){            var $div=$("<div title='盒子'>DOM</div>");            $('body').append($div);    })    </script>

插入内容

js用法

<script type="text/javascript">        window.onload=function(){            var div=document.getElementsByTagName("div")[0];            var h1=document.createElement("h1");            var o=div.insertBefore(h1,div.firstChild);//返回值o表示新添加的子节点        }    </script>

<body>        <div>            <p>段落文本</p>        </div>    </body>

jquery内部插入内容有4种方法如下：

append()、appendTo()、prepend()、prependTo()
具体用法如下：
append(content) 参数content可以是一个元素、HTML字符串、jquery对象
append(function(index,html)) 参数是个返回HTML字符串的函数

<script type="text/javascript">        $(function(){            $(".container").append("<img src='#'/>");        })    </script>

<body>        <h2>图列表</h2>        <ul class="container">            <li><img src="#"/></li>            <li><img src="#"/></li>        </ul>    </body>

jquery外部插入内容有4种方法如下：

after()、before()、insertAfter()、insertBefore()

具体用法如下：
after(content) 参数content可以是一个元素、HTML字符串、jquery对象
after(function(index)) 参数是个返回HTML字符串的函数

<script type="text/javascript">        $(function(){            $("li img").after($("li img").attr('src'));        })    </script>

<body>        <h2>图列表</h2>        <ul class="container">            <li><img src="#"/></li>            <li><img src="#"/></li>        </ul>    </body>

删除内容

js用法

其中js的removeChild（）方法，可以删除指定的节点及其包含的所有子节点，并返回这些删除的内容

<script type="text/javascript">            window.onload=function(){                var div=document.getElementsByTagName("div")[0];                var p=document.getElementsByTagName("p")[0];                var p1=div.removeChild(p);                div.parentNOde.insertBefore(p1,div.nextSibling);            }        </script>

<body>            <div>                <p>段落文本</p>            </div>        </body>

jquery用法

jquery提供有3种删除内容的方法如下：
remove()、empty()、detach()
remove() 从DOM中删除所有匹配的元素
empty() 删除匹配的元素集合所有的子节点
detach() 从DOM中删除所有匹配的元素

<script type="text/javascript">            $(function(){                $('button').onclick(function(){                    $('p').empty();                });            })        </script>

<body>            <p>段落文本1</p>            <p>段落文本2</p>            <div>布局文本</div>            <button>清除段落文本</button>        </body>

克隆内容

js用法

nodeObject.cloneNode(incluede_all)其中参数值要么为true要么为false，以此来设置被复制的节点是否包括源节点的所有属性和子节点
true：表示复制当前节点及所有子节点
false：仅复制当前节点

<script type="text/javascript">        window.onload=function(){            var div=document.getElementsByTagName("div")[0];            div.onclick=function(){                var div1=div.cloneNode(true);                div.parentNode.insertBefore(div1,div.nextSibling);            }        }    </script>

<body>        <div>            <p>段落文本</p>        </div>    </body>

爱生活，爱代码

0 0