经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript DOM 基础操作
来源:cnblogs  作者:永恒之月TEL  时间:2022/1/18 14:40:54  对本文有异议

JavaScript DOM 基础操作

一、获取元素的六方式

  1. document.getElementById('id名称') //根据id名称获取
  2. document.getElementsByclassName('元素类名') //根据元素类名获取 返回值:伪数组
  3. document.getElementsByTagName('元素类名') //根据元素标签获取 返回值:伪数组
  4. document.querySelector('选择器') //根据选择器获取第一个元素
  5. document.querySelectorAll('选择器') //根据选择器获取所有元素 返回值:伪数组

二、操作元素内容

1.获取元素文本内容

格式:

获取内容:元素 . innrtText

修改内容:元素 . innerText="修改的内容"

  1. //点击div盒子改变里面的文本
  2. <div Style="background:red" id="JD">我是旧的内容</div>
  3. //获取元素(通过标签选择器来获取内容)
  4. var ele=document.querySelector('div')
  5. //获取元素(通过id获取元素)
  6. var btn=document.getElementById('JD')
  7. //获取元素文本内容并输出
  8. console.log(ele.innerText)
  9. //给div一个点击事件(这里用的是id获取到的div元素)
  10. btn.onclick=function(){
  11. //重新为div设置新的内容
  12. ele.innerText="我重生了"
  13. }

2.操作元素超文本内容(直接修改代码)

格式:

获取内容:元素 . innrtHTML

修改内容:元素 . innerHTML="新的标签"

  1. //点击div盒子把div变成p标签
  2. <div style="background:red" id="JD">我是div盒子</div>
  3. //获取元素(通过标签选择器来获取内容)
  4. var ele=document.querySelector('div')
  5. //获取元素(通过id获取元素)
  6. var btn=document.getElementById('JD')
  7. //获取元素的标签里的内容以文本的方式并输出
  8. console.log(ele.innerHTML)
  9. //给div一个点击事件(这里用的是id获取到的div元素)
  10. btn.onclick=function(){
  11. //把div盒子变成p标签
  12. ele.innerHTML="<p>我变成了p标签了,嘤嘤嘤!</p>"
  13. }

三、操作元素属性

1.原生属性(type、id、src)

格式:

获取属性:元素 . 属性名

设置属性: 元素 . 属性名=”属性值“

  1. //点击图片改变图片背景链接达到来回切换背景的效果
  2. //html
  3. <img scr="../img/bg1.jpg" id="bg">
  4. //JavaScript
  5. //获取元素(通过id获取元素)
  6. var btn=document.getElementById('bg')
  7. //获取元素scr的路径并输出
  8. console.log(btn.src)
  9. var tes=0 //控制切换的图片
  10. //给img一个点击事件(这里用的是id获取到的img元素)
  11. btn.onclick=function(){
  12. if(tes===0){
  13. btn.src="../img/bg2.jpg"
  14. tes=1
  15. }else{
  16. btn.src="../img/bg1.jpg"
  17. tes=0
  18. }

2.定义和操作自定义属性

(1)定义属性

定义格式:data-*

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>无标题文档</title>
  5. </head>
  6. <body>
  7. <div style="wight:500px;height:500px;background:black" data-a="p1" id="ab"> p1
  8. <div style="wight:150px;height:150px;background:green" data-a="p2">p2</div>
  9. <div style="wight:150px;height:150px;background:blue" data-a="p3">p3</div>
  10. </div>
  11. <script>
  12. //获取到父的div元素
  13. var divab=document.getElementById("ab")
  14. //点击点击子元素父元素的事件也会被触发
  15. divab.onclick=function(e){
  16. //用自定义属性来判断点的是子元素,还是父元素。
  17. if(e.target.dataset.a==="p1"){
  18. console.log("p1")
  19. }
  20. if(e.target.dataset.a==="p2"){
  21. console.log("p2")
  22. }
  23. if(e.target.dataset.a==="p3"){
  24. console.log("p3")
  25. }
  26. }
  27. </script>
  28. </body>
  29. </html>

(2)操作自定义属性

操作自定义属性格式:

获取属性:元素 . getAttribute("属性名")

设置属性:元素 . setAttribute("属性名",”属性值“)

删除属性:元素 . removeAttribute("属性名")

  1. //html
  2. <div id="tes" data-cs="Hello Wrold">自定义属性测试</div>
  3. //JavaScript
  4. //获取元素
  5. var ter=document.getElmentById("tes")
  6. //获取自定义属性并输出
  7. console.log(ter.getAttribute(CS))
  8. //重新给自定义属性CS赋值
  9. ter.setAttribute("CS","Hello man")
  10. //删除自定义属性
  11. ter.removeAttribute("CS")

四、操作元素类名

格式:

获取类名:元素 . className

设置类名:元素 . className="新类名"

  1. //点击div盒子和实现改变背景颜色
  2. //设置类名改变div的背景色
  3. .divBgRed{
  4. background:red;
  5. }
  6. .divBgBlue{
  7. background:blue;
  8. }
  9. <div class="divBgRed" id="divid">我是可以变颜色的盒子</div>
  10. //获取div的元素
  11. var divid=document.getElementById("divid")
  12. divid.onclick=function(){
  13. divid.className="divBgBlue"
  14. }

五、操作元素行内样式

格式:

获取行内样式:元素 .style . 样式名

设置行内样式:元素 . style.样式名="样式值"

  1. //输出和修改行内样式
  2. <div style="background-color:red;width=100px" id="divid">我是红色的div盒子</div>
  3. var tre=document.getElementById("divid")
  4. console.log(tre.style.backgroundColor) //当行内样式有短横线时,把短横线去掉变成驼峰写法
  5. tre.onclick=function(){
  6. tre.style.background="blue"
  7. tre.style.width="500px"
  8. }

六、获取非行内样式

格式:window . getComputedStyle(元素) . 样式名

注意:行内样式和非行内样式都可以获取

七、节点操作(标签)

1.创建结点(标签)

格式:document.creatElement("标签名称")

  1. var div=document.creatElement("div")
  2. var p=document.creartElement("p")

2.插入结点(标签)

格式:

**父节点的元素 . appendChild(子节点) ** //默认在最后插入

父节点元素 . insertBefore(要插入的节点,哪一个你节点的前面)

  1. <<body>
  2. <div>
  3. <span>我是span标签</span>
  4. <ul>我是ul标签</ul>
  5. </div>
  6. <script>
  7. //问题1:在ul标签里面的最后位置插入li标签
  8. //获取ul标签的元素
  9. var ul=document.querySelector("ul")
  10. //创建li标签
  11. var li=document.createElement("li")
  12. //在ul标签里插入li标签
  13. ul.appendChild(li)
  14. //问题2:在div里的span标签前面插入入一个p标签
  15. //获取div父元素
  16. var div=document.querySelector("div")
  17. //获取要插入位置的后一个标签的元素
  18. var span=document.querySelector("span")
  19. //创建要插入的p标签
  20. var p=document.createElement("p")
  21. //在相应位置插入p标签
  22. div.insertBefore(p,span)
  23. </script>
  24. </body>

3.删除节点(标签)

格式:

父节点元素 . removeChild(子节点)

想删除节点元素 . remove()

  1. <body>
  2. <div>
  3. <span>标签</span>
  4. </div>
  5. </body>
  6. <script>
  7. //获取父标签的元素
  8. var div=document.querySelector("div")
  9. //删除span标签
  10. div.removeChild(span)
  11. //获取要删除span标签的元素
  12. var span=ocument.querySelector("span")
  13. //删除span标签
  14. span.remove()
  15. </script>

4.替换节点(标签)

格式:

父节点元素 . replaceChild(换上节点,换下节点)

  1. <body>
  2. <div>
  3. <span>标签</span>
  4. </div>
  5. </body>
  6. <script>
  7. //获取span标签的父元素
  8. var div=document.querySelector("div")
  9. //创建p标签
  10. var p=document.creartElement("p")
  11. //获取span标签的元素
  12. var span=document.querySelector("span")
  13. //把span标签替换成p标签,里面的内容不变
  14. div.replaceChild(p,span)
  15. </script>

5.克隆节点(标签)

说明:就是把想要的标签复制一份,需要结合插入标签才能有用(相对于复制和粘贴)

格式:

想要克隆标签的元素 . cloneNode(是否克隆后代节点)

  1. //问题:把div标签复制一份,并复制里面的子元素
  2. <body>
  3. <div>
  4. <span>标签</span>
  5. </div>
  6. </body>
  7. <script>
  8. //获取div标签的元素
  9. var div=document.querySelector("div")
  10. //克隆div标签并克隆里面的子元素
  11. var cle=div.cloneNode(true)
  12. //把复制的div标签插入到原来div后面
  13. //获取body标签的元素
  14. var body=document.querySelector("body")
  15. //插入div标签
  16. body.appendChild(cle)
  17. </script>

本文来自博客园,作者:永恒之月TEL,转载请注明原文链接:https://www.cnblogs.com/akc4/p/15817278.html

原文链接:http://www.cnblogs.com/akc4/p/15817278.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号