1. // id获取元素
    2. document.getElementById();
    3. // 通过class查找
    4. document.getElementsByClassName()
    5. // 通过name名称获取（一组）
    6. document.getElementsByName()
    7. // 通过标签名获取(一组）
    8. document.getElementsByTagName()
    9. // 通过选择器获取
    10. document.querySelector()
    11. // 通过选择器获取全部
    12. document.queySelectoAll()
    13. // 获取指定元素所有的子元素
    14. let div = document.querSelector('div')
    15. div.children // 获取到的是div下的子元素
    16. div.children[索引值] // 获取到的是所有的子元素（元素节点）
    17. div.childNodes()// 返回的是div下的所有的子节点，包含文本节点，注释，元素节点啥的
    19. // 以下方法只支持IE9及以上支持，但是工作中并不使用
    20. --------------------------------------------------------------------------------------
    21. // 获取第一个子元素
    22. div.firstElementChild //返回父节点下第一个元素节点
    23. // 获取最后一个子元素
    24. div.fistElementChild   // 元素节点，可以偶尔使用，
    25. // 获取子元素/父节点
    26. div.parenElement
    27. div.parentNode  //2者用法相同，需要浏览器版本不同
    28. // 相邻上一个节点/元素
    29. div.previousElementSibling //返回上一个元素节点，还不错
    30. // 获取相邻的下一个节点/元素
    31. div.nextElementSibling
    32. ----------------------------------------------------------------------------------------
    33. div.firstChild  //
    34. div.nextSibling   //
    35. div.previousSibling  //
    36. div.lastchild()
    38. ---------------------------------------------------------------------------------------------
    40. // 创建节点
    41. document.createElement("span")
    42. // 添加节点
    43. // 创建文档片段（碎片）
    44. docuent.createDocumentFragment();
    45. document.appendChild() // 会添加到最后
    46. // 插入节点
    47. document.insertBefore(新参，旧参)
    48. // 替换节点
    49. document.replaceChild(新参 , 旧参);
    50. // 删除节点,只能通过父元素来删除
    51. document.parentNode.removeChild(指定子元素)
    52. // 克隆节点
    53. document.cloneNode() //参数传true，表示子元素也克隆
    55. /*
    56. 无论是创建还是查询出来的标签，系统都会将元素包装成一个对象返回给我们，
    57. 对象中包含了元素的属性
    58. */
    60. // 获取元素属性
    61. let div = document.querySelector('img')
    62. div.src
    63. div.getAttribute("alt") // 可以获取自定义属性
    64. // 修改元素
    65. div.title = "图片标题"
    66. div.setAttribute("title","22") // 可以修改自定义属性
    67. // 新增属性
    68. div.setAttribute("it666","66666") // 存在修改，不存在新增
    69. // 删除属性
    70. div.removeAttribute("title")
    71. div.removeChild('a') // 删除div下的a标签 // 只是剪切走，a节点还在堆内存中
    72. a.remove() // 直接删除自己，并且从内存中移出
    75. // 获取元素内容
    76. let div =  document.querySelector('div')
    77. div.innerHTML // 包含标签
    78. div.innerText // 不包含标签，去除空格
    79. div.textContent // 不包含标签，去除空格
    80. // 设置内容
    81. div.innerHTML
    82. div.innerText
    83. div.textContent
    85. // 设置元素样式 拥有-采用驼峰转换，添加的样式都是行内样式，会覆盖同名css
    86. let div =  document.querySelector('div')
    87. div.className = ''
    88. div.style.width = '300px'
    89. // 获取样式
    90. div.style.width // 只能获取行内样式的值
    91. window.getComputedStyle(div) // 获取全部
    93. //