JavaScript中怎么操作DOM

发布时间:2021-07-01 15:51:56 作者:Leah
来源:亿速云 阅读:105

本篇文章给大家分享的是有关JavaScript中怎么操作DOM,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

1. getElementById(id)     

这是通过id来访问某一元素,最常用的之一,例:   

<html>          <body>          <div id="myid">          test           </div>          <script language="javascript">          alert(document.getElementById("myid").innerHTML);           </script>          </body> </html>

注意点:如果元素的ID不是***,则会取得***个该ID名称的元素。

2. getElementsByName(name)    

这是通过name来取得某一堆元素(作为数组),看 Element后面有个小s就知道了,ID是HTML文档中要求***的,name可以不是***,如checkbox、radio等地方会用到多个 input用同一个name来识别是否为同党。对了,getElementsByName(name)仅用于取得input、radio、 checkbox等元素,如<input name="myradio" type="radio" />。

3. getElementsByTagName(tagname)

看这方法就知道这也是取得某一堆元素(作为数组),是通过TagName也就是标签名来取得。你可以遍历这个数组获得每一个单独的元素。当一个DOM结构很大时,可以通过它来有效地缩小搜查范围。   

<html>                    <head>          <script>          function test() {           testall=document.getElementsByTagName("body");           testbody=testall.item(0); //获得所有tagName是body的元素(当然每个页面只有一个)           testall=testbody.getElementsByTagName("p");// 获得body子元素种的所有P元素           testnode=testall.item(1); // 获得第二个P元素                    alert(testnode.firstChild.nodeValue); //显示这个元素的文本         }           </script>          </head>          <body>          <p>hi</p>          <p>hello</p>          <script language="javascript">          test();           </script>          </body> </html>

4. appendChild(node)

向当前的元素(应该叫对象比较恰当)追加节点。   

<html>          <body>          <head>          </head>          <div id="test"></div>          <script type="text/javascript">          var newdiv=document.createElement("div")           var newtext=document.createTextNode("A new div")                    newdiv.appendChild(newtext)           document.getElementById("test").appendChild(newdiv)           </script>          </body> </html>

刚才我在***个例子中为了显示出内容,用了innerHTML,刚才看到文章才得知innerHTMl不属于DOM。

5. removeChild(childreference)

删除当前节点的子节点,返回被删除的节点。这个被删除的节点可以被插入到别的地方。

<html>          <body>          <div id="parent"><div id="child">A child</div></div>          <script language="javascript">          var childnode=document.getElementById("child")           var removednode=document.getElementById("parent").removeChild(childnode)           </script>          </body> </html>

6. cloneNode(deepBoolean)

复制并返回当前节点的复制节点,复制节点是一个孤立节点,它复制了原节点的属性,在把这个新节点加入到document前,根据需要修改ID属性确保其ID的***。这个方法支持一个布尔参数,当deepBoolean设置true时,复制当前节点的所有子节点,包括该节点内的文本。

<html>          <body>          <p id="mynode">test</p>          <script language="javascript">          p=document.getElementById("mynode")           ppclone = p.cloneNode(true);           p.parentNode.appendChild(pclone);           </script>          </body> </html>

7. replaceChild(newChild, oldChild)

把当前节点的一个子节点换成另一个节点。

<html>          <body>          <div id="mynode2">          <span id="orispan">span</span>          </div>          <script language="javascript">          var orinode=document.getElementById("orispan");           var newnode=document.createElement("p");           var text=document.createTextNode("test ppp ");           newnode.appendChild(text);           document.getElementById("mynode2").replaceChild(newnode, orinode);           </script>          </body> </html>

以上就是JavaScript中怎么操作DOM,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

推荐阅读:
  1. JavaScript如何操作DOM
  2. JavaScript中Dom操作实例详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:JavaScript中动态向表格添加数据的示例分析

下一篇:javascript中 “ && ” 和 “ || ”有什么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》