DOM节点 – 元素节点

  1. <ul>
  2.         <li>HTML5</li>
  3.         <li>CSS3</li>
  4.         <li>JavaScript</li>
  5.         <li>Java</li>
  6.     </ul>
  1. var ul = document.getElementsByTagName('ul')[0]
  2. var li2 = ul.childNodes[3]
  3. // 获取子节点 包含文本节点 会受到HTML文档中空白字符的干扰
  4. var li2 = ul.children[1]
  5. // children获取子元素/标签 不包含空白字符
  6. console.log(li2)
  7. alert(li2.outerHTML)
  8. // 获取包含本身在内的所有html代码
  9. document.write('123')
  10. document.write('456')
  11. document.writeln('123')
  12. document.writeln('456')
  13. document.write('<pre>')
  14. for(var k in li2){
  15.     document.writeln(k)
  16.     // 可以在</body>之前 向HTML文档或当前页面写入新的文本
  17. }
  18. document.write('</pre>')
  19. alert(li2.previousElementSibling.outerHTML)
  20. // previousElementSibling 属性返回同一树层级中
  21. // 指定节点的前一个节点
  22. // 被返回的节点以Node 对象的形式返回
  23. alert(li2.nextElementSibling.outerHTML)
  24. // nextElementSibling属性返回同一树层级中      
  25. alert(li2.childElementCount)
  26. // 子元素的数量 
  27. console.log(ul)
  28. alert(ul.firstChild.nodeName)
  29. alert(ul.lastChild.nodeName)
  30. // 返回第一个或最后一个节点
  31. alert(ul.firstElementChild.outerHTML)
  32. alert(ul.lastElementChild.outerHTML)
  33. // 返回第一个或最后一个元素
  34. var newli =document.createElement('li')
  35. // 创建一个新的标签元素
  36. newli.innerText = 'PHP'
  37. ul.appendChild(newli)
  38. // 拼接子元素 添加到最后一个子节点之后
  39. var removed = ul.removeChild(ul.firstElementChild)
  40. // removeChild 移除子节点
  41. ul.appendChild(removed)
  42. ul.replaceChild(removed,newli)
  43. // 替换子节点
  44. ul.insertBefore(removed,ul.firstChild)
  45. // insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
  46. // ul.insertBefore('插入内容','在...节点之前')
  47. ul.insertAdjacentText('beforeBegin','外面的外面')
  48. // 插入文本
  49. // beforeBegin 在...开始之前
  50. ul.insertAdjacentHTML('afterBegin','<li>里面的前面</li>')
  51. // afterBegin 在...里面的前面
  52. ul.insertAdjacentHTML('beforeEnd','<li>里面的后面</li>')
  53. // beforeEnd 在...里面的后面
  54. ul.insertAdjacentText('afterEnd','外面的后面')
  55. // afterEnd 在...外面的后面
  56. ul.insertAdjacentElement()
  57. // 插入标签元素
  58. // ul.insertAdjacentHTML()
  59. // 插入代码

黄良钵

博客站长,前端开发工程师

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

DOM节点 – 元素节点
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close