1. // id获取袁术
    2. document.getElementById();
    3. // 通过calss查找
    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[索引值] // 获取到的是所有的子元素（元素节点）
    16. // 获取第一个子元素
    17. div.firstElementChild //返回父节点下第一个元素节点
    18. // 获取最后一个子元素
    19. div.fistElementChild   // 元素节点，可以偶尔使用，
    20. // 获取子元素/父节点
    21. div.parenElement
    22. div.parentNode  //2者用法相同，需要浏览器版本不同
    23. // 相邻上一个节点/元素
    24. div.previousElementSibling //返回上一个元素节点，还不错
    25. // 获取相邻的下一个节点/元素
    26. div.nextElementSibling
    27. ----------------------------------------------------------------------------------------
    28. //以下是获得的有文本节点,我要你们有何用?
    29. div.firstChild  //垃圾玩意，要你何用？
    30. div.nextSibling   //垃圾玩意，使用情况有多种，不建议使用
    31. div.previousSibling  //垃圾逼玩意，返回还是文本节点，老子要你何用
    32. div.lastchild()（同样是个垃圾玩意，还是文本节点，老子要文本节点去杀人还是放火？）
    33. div.childNodes()// 获取到的是所有的节点（包含子节点，不要使用，垃圾玩意）
    34. ---------------------------------------------------------------------------------------------
    36. // 创建节点
    37. document.createElement("span")
    38. // 添加节点
    39. document.appendChild() // 会添加到最后
    40. // 插入节点
    41. document.insertBefore(新参，旧参)
    42. // 替换节点
    43. document.replaceChild(新参 , 旧参);
    44. // 删除节点,只能通过父元素来删除
    45. document.parentNode.removeChild(指定子元素)
    46. // 克隆节点
    47. document.cloneNode() //参数传true，表示子元素也克隆
    49. /*
    50. 无论是创建还是查询出来的标签，系统都会将元素包装成一个对象返回给我们，
    51. 对象中包含了元素的属性
    52. */
    54. // 获取元素属性
    55. let div = document.querySelector('img')
    56. div.src
    57. div.getAttribute("alt") // 可以获取自定义属性
    58. // 修改元素
    59. div.title = "图片标题"
    60. div.setAttribute("title","22") // 可以修改自定义属性
    61. // 新增属性
    62. div.setAttribute("it666","66666") // 存在修改，不存在新增
    63. // 删除属性
    64. div.removeAttribute("title")
    66. // 获取元素内容
    67. let div =  document.querySelector('div')
    68. div.innerHTML // 包含标签
    69. div.innerText // 不包含标签，去除空格
    70. div.textContent // 不包含标签，去除空格
    71. // 设置内容
    72. div.innerHTML
    73. div.innerText
    74. div.textContent
    76. // 设置元素样式 拥有-采用驼峰转换，添加的样式都是行内样式，会覆盖同名css
    77. let div =  document.querySelector('div')
    78. div.className = ''
    79. div.style.width = '300px'
    80. // 获取样式
    81. div.style.width // 只能获取行内样式的值
    82. window.getComputedStyle(div) // 获取全部
    84. //