登录  /  注册
博主信息
博文 38
粉丝 0
评论 0
访问量 28804
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
元素查询+元素遍历与增删改常用方法
一个好人
原创
599人浏览过

获取DOM元素的常用方法

  1. const items = document.querySelectorAll('.list>li')
  2. console.log(items);
  3. const item = document.querySelector('.list>li')
  4. console.log(item);

运行结果:

  1. NodeList(6) [li#name, li#name, li, li, li, li]
  2. <li id=​"name" style=​"color:​ red;​">​::marker"item1"</li>​

获取元素的快捷方法

  1. console.log(document.body);
  2. console.log(document.head);
  3. console.log(document.title);
  4. // html
  5. console.log(document.documentElement);
  6. console.log(document.URL);

运行结果:

  1. <body>​…​</body>
  2. <head>​…​</head>
  3. dom操作-获取DOM元素
  4. <html lang=​"zh-CN"><head>​…​</head><body>​…​</body></html>
  5. http://127.0.0.1:5500/Javascript/0327-1.html

元素遍历与增删改常用方法

  1. const list = document.querySelector('.list')
  2. let items = list.childNodes // 获得所有类型节点
  3. items = [...items].filter(item=>item.nodeType==1)//节点类型为1为元素,3为文本
  4. items = list.children //与上面等效,更简单
  5. console.log(items);
  6. // 获取元素
  7. console.log(list.firstElementChild.textContent);
  8. console.log(list.lastElementChild.textContent);
  9. console.log(items[items.length-1].textContent);
  10. let four = document.querySelector('.list :nth-child(4)')
  11. console.log(four.textContent);
  12. console.log(four.previousElementSibling.textContent);
  13. console.log(four.nextElementSibling.textContent);
  14. // 父节点
  15. let parent = four.parentElement
  16. console.log(parent);

运行结果:

  1. HTMLCollection(6) [li, li, li, li, li, li]
  2. item1
  3. item6
  4. item6
  5. item4
  6. item3
  7. item5
  8. <ul class=​"list">​…​</ul>​
  1. // 创建
  2. const ul = document.createElement('ul')
  3. // 添加
  4. document.body.append(ul)
  5. for(let i=0; i<6;i++){
  6. const li = document.createElement('li')
  7. li.append('item-'+(i+1))
  8. ul.append(li)
  9. }
  10. // 优化,先添加到片段,再统一添加到网页
  11. const frag = document.createElement('ul')
  12. document.body.append(ul)
  13. for(let i=0; i<6;i++){
  14. const li = document.createElement('li')
  15. li.append('item-'+(i+1))
  16. frag.append(li)
  17. }
  18. ul.append(frag)
  19. // after
  20. const three = ul.querySelector(':nth-child(3)')
  21. let li = document.createElement('li')
  22. li.append('新的<li>')
  23. three.after(li)
  24. // 克隆
  25. ul.append(li.cloneNode(true))

运行结果:

  1. item-1
  2. item-2
  3. item-3
  4. 新的<li>
  5. item-4
  6. item-5
  7. item-6
  8. item-1
  9. item-2
  10. item-3
  11. item-4
  12. item-5
  13. item-6
  14. 新的<li>

总结:

有些问题不理解,form.uname.value和document.forms.login.email.value的效果是一样,为什么要用复杂的方法?

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学