DOM节点 – 元素节点

原创 黄良钵  2017-07-14 21:37  阅读 6 次 评论 0 条
  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. // 插入代码
本文地址:https://xn--nf1a578axkh.xn--fiqs8s/745.html
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情