12.节点.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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">1111</p>
  11. <div id="list">
  12. <p>你好</p>
  13. </div>
  14. <div id="demo"></div>
  15. <h1 id="news">
  16. <p>新的</p>
  17. </h1>
  18. <script>
  19. var box = document.getElementById("box");
  20. var main = document.getElementById("main");
  21. var list = document.getElementById("list");
  22. var p1 = document.querySelector("#list p");
  23. var demo = document.getElementById("demo")
  24. var news = document.getElementById("news")
  25. console.log(box.nodeName) //节点名字
  26. console.log(main.nodeName) //节点名字
  27. console.log(main.nodeValue) //null
  28. console.log(p1.nodeValue,'333') //null
  29. console.log(main.nodeType) //1 节点类型
  30. /**
  31. * 元素节点没有nodeValue 是null
  32. * document 是没有nodeValue null
  33. * 节点是元素节点,则 nodeType 属性将返回 1。
  34. 节点是属性节点,则 nodeType 属性将返回 2。
  35. 节点是文本节点,则 nodeType 属性将返回 3。
  36. 节点是注释节点,则 nodeType 属性将返回 8。
  37. nodeName 节点名字
  38. */
  39. // 单行注释
  40. /* 多行注释 */
  41. /**
  42. * 往元素中添加内容
  43. * innerText 从开始内容到结束内容全部展示 但是不包含标签 纯文本信息
  44. * innerHTML 从开始内容到结束内容全部展示 包含了标签
  45. */
  46. demo.innerText ='哈哈'
  47. demo.innerHTML = '哈哈哈哈哈'
  48. alert(news.innerHTML)
  49. alert(news.innerText)
  50. </script>
  51. </body>
  52. </html>