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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
获取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);
  7. // 获取元素
  8. console.log(list.firstElementChild.textContent);
  9. console.log(list.lastElementChild.textContent);
  10. console.log(items[items.length-1].textContent);
  12. let four = document.querySelector('.list :nth-child(4)')
  13. console.log(four.textContent);
  14. console.log(four.previousElementSibling.textContent);
  15. console.log(four.nextElementSibling.textContent);
  16. // 父节点
  17. let parent = four.parentElement
  18. 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)
  25. // 克隆
  26. 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的效果是一样，为什么要用复杂的方法？

【文章原创作者：滨海网页制作公司 http://www.1234xp.com/binhai.html 欢迎留下您的宝贵建议】
更多阅读