关于DOM的知识点总结

1.HTML的基本结构

①HTML标签：document.documentElement

②body标签：document.body

③head标签：document.head

④网页标签：获取→document.title； 设置→document.title = 值

2.获取标签

①css选择器：（1）document.querySelector(css选择器)→获取满足css选择器的第一个元素

（2）document.querySelectorAll(css选择器)→获取满足css选择器的所有元素

②id：document.getElementsByTagName(id名)

③标签名：document.getElementsByTagName(标签名)

④类名：document.getElementsByClassName(类名)

⑤name属性：document.getElementsByName(name属性的值)

⑥关系：获取所有子标签→ 父.childern

                获取第一个子标签→ 父.fristElementChild

                获取最后一个子标签→ 父.lastElementChild

                获取父标签→ 子.parentElement

                获取上个兄弟标签→ 兄弟.previousElemenSibling

                获取下一个兄弟标签→  兄弟.nextElementSibling

3.内容操作

①双标签内容：文本内容的获取是  标签.innerText  ； 文本内容的设置是  标签.innerText = 值

                          带标签的内容的获取是   标签.innerHTML ； 带标签的内容的设置是  标签innerHTML=值

②表单元素内容 ： 获取  → 表单元素.value  ；  设置 →  表单元素.value = 值

4.类名操作

获取 → 标签.className  ；  设置 → 标签className = 值

5.样式操作

获取 → window.getComputedStyle(标签) → 返回所有css键值组成的对象

设置 → 标签.style.css键 = css值 ：① css键如果包含连字符，就使用小驼峰或中括号写法；②css值一定是个字符串；③一定是行内样式

6.属性操作

①设置属性：标签.setAttribute(键，值)

②获取属性：标签.getAttribute(键)

③删除属性：标签.removeAttribute(键)

获取到的标签其实都是对象，使用console.dir()可以输出对象的样子，既然是对象，就可以像对象一样进行属性操作。

7.节点操作

①创建节点：document.createElement(标签名)

②插入节点：给父的末尾追加一个字标签 → 父.appendChild(子)

                        给某个前面添加一个新的子 → 父.insertBefore(新的子，旧的子)

③替换节点：父.replaceChild(新的子，旧的子)

④复制节点：节点.cloneNode(true)

⑤删除节点：父.removeChild(子)

⑥获取标签位置：标签.offsetLeft ； 标签.offsetTop

⑦获取标签大小：包含边框的有：标签.offsetWidth  ；  标签.offsetHeight

                              不包含边框的有： 标签.clientWidth  ；  标签.clientHeight

8.窗口大小

①包含滚动条的大小： window.innerWidth  、  window.innerHeight

②不包含滚动条的大小：  document.documentElement.clientWidth、document.documentElement.clientHeight

③获取body大小：document.body.clientWidth、document.body.clientHeight

9.滚动过得距离

①有文档声明：document.documentElement.scrollTop、document.documentElement.scrollLeft

②没有文档声明：document.body.scrollTop、document.body.scrollLeft

③兼容写法：var t = document.documentElement.scrollTop ||  document.body.scrollTop、

document.documentElement.scrollTop = document.body.scrollTop = 值

④短路运算：利用&&和||根据判断两个数据选择一个赋值给变量。