15.节点.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="box"></div>
  10. <p id="main">11111</p>
  11. <div id="list">
  12. <p>hello world</p>
  13. <!-- <input type="text" name="" id=""> -->
  14. </div>
  15. <script>
  16. var box = document.getElementById("box");
  17. var main = document.querySelector("#main");
  18. var list = document.querySelector("#list");
  19. console.log(box.nodeName); // 节点名字
  20. console.log(main.nodeName);
  21. console.log(main.nodeValue); // null 节点值
  22. console.log(main.nodeType); // 节点类型 1
  23. // 往元素中添加内容
  24. // innerHTML 从开始内容到结束内容 全部展示 包括HTML标签
  25. // innerText 从开始内容到结束内容 全部展示 不包含HTML标签
  26. box.innerHTML = '这是一个盒子';
  27. main.innerText = '这是主要的内容';
  28. alert(list.innerHTML);
  29. alert(list.innerText);
  30. /*
  31. document是没有nodeValue的:null
  32. 元素节点是没有nodeValue的:null
  33. 属性节点id的nodeValue:d1
  34. 内容节点的nodeValue:hello HTML DOM
  35. */
  36. // 单行注释
  37. /* 多行注释 */
  38. </script>
  39. </body>
  40. </html>