DOM核心内容

// 1.获取标签元素

/*

document.getElementById(id名)

document.getElementsByTagName(标签名)

document.getElementsByClassName(类名)

document.getElementsByName(name属性的值)

document.querySelector(css选择器)

document.querySelectorAll(css选择器)

*/

// 2.属性操作 - 操作标签的属性

// 设置属性 - 标签对象.setAttribute(属性名, 属性值)

// 获取属性值 - 标签对象.getAttribute(属性名)

// 删除属性 - 标签对象.removeAttribute(属性名)

// 3.内容操作 - 操作标签中的内容

// 双标签文本内容：标签对象.innerText - 获取/设置

// 双标签带标签的内容：标签对象.innerHTML - 获取/设置

// 表单元素的内容：表单元素.value - 获取/设置

// 4.设置样式

// 标签对象.style.css键 = css值

// 5.设置类名

// 标签对象.className = 类名

// 6.通过标签的关系来获取标签

// 获取所有子标签 - 父标签.children

// 获取上一个兄弟标签 - 标签.previousElementSibling

// 获取下一个兄弟标签 - 标签.nextElementSibling

// 获取父标签 - 子标签.parentElement

// 获取第一个子标签 - 父标签.firstElementChild

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

// 7.标签操作

// 创建标签 - document.createElement(标签名)

// 插入标签：

/*

将子标签插入到父标签的末尾：父标签.appendChild(子标签对象)

将子标签插入到父标签的某个子标签的前面：父标签.insertBefore(新的子标签, 旧的子标签)

*/

// 删除标签 - 父标签.removeChild(子标签)

// 替换 - 父标签.replaceChild(新的子标签, 旧的子标签)

// 标签复制 - 标签.cloneNode(true)

// 8.获取标签样式 -

getComputedStyle(标签对象) - 返回包含了标签所有css键值对对象

// 9.获取标签大小

/*

包含边框的大小：

    标签.offsetWidth

    标签.offsetHeight

不包含边框的大小

    标签.clientWidth

    标签.clientHeight

*/

// 10.获取标签的位置 - 相对于设置过定位的父标签的位置

// 获取left位置：标签.offsetLeft

// 获取top位置：标签.offsetTop

// 11.不包含滚动条的网页的大小

// 宽：document.documentElement.clientWidth

// 高：document.documentElement.clientHeight

// 12.获取滚动过的距离 - 卷去的高度

// document.documentElement.scrollTop || document.body.scrollTop - 获取/设置

// 13.html基本结构

// html：document.documentElement

// body：document.body

// head：document.head

// title标题文本：document.title - 获取/设置