属性访问器与常用节点操作函数

属性访问器与常用节点操作函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <ul class="list">
  11. <li class="item">item1</li>
  12. <li class="item">item2</li>
  13. <li class="item">item3</li>
  14. <li class="item">item4</li>
  15. <li class="item">item5</li>
  16. </ul>
  17. <script>
  18. // 作业内容:
  19. // 1. 实例演示"访问器属性",例如商品金额计算;
  20. // 2. 实例演示dom元素的获取,遍历与增删,方法不限于课堂上提及的,更多的可查阅mdn手册;
  21. // 访问权属性
  22. let Person = {
  23. data:{id:1,name:"华为笔记本",price:4980},
  24. get price(){
  25. return this.data.price;
  26. },
  27. set price(age){
  28. return this.data.price = price;
  29. },
  30. };
  31. console.log("笔记本价格:" + Person.data.price)
  32. console.log("笔记本价格合计:" + Person.data.price * 2);
  33. // 获取dom元素
  34. const items = document.querySelectorAll(".list .item");//获取list 下所有子节点
  35. let ulList = document.querySelector(".list");
  36. console.log(ulList.childNodes);//不区分节点类型
  37. console.log(ulList.children);//只返回元素类型的节点
  38. // 遍历dom元素
  39. [...ulList.children].forEach(items => (items.style.color = "red"));//用归并展开,遍历ul 中节点
  40. const li1 = document.querySelector(".item:nth-of-type(3)"); //指定获取某一个节点
  41. console.log(li1);
  42. // 添加节点
  43. let div1 = document.createElement("div");//创建div 节点
  44. document.body.append(div1); //将div节点写入到文档(body中)
  45. let h3 = document.createElement("h3");//创建h3节点
  46. h3.textContent = "Hello Word";//h3赋值
  47. div1.append(h3);//将h3节点写入到文档(div中)
  48. // 删除节点
  49. let div2 = document.createElement("div");
  50. document.body.append(div2);
  51. let h1 = document.createElement("h1");
  52. h1.textContent = "删除的节点";
  53. div2.append(h1);
  54. div2.removeChild(h1);
  55. </script>
  56. </body>
  57. </html>