DOM 学习

DOM文档对象模型

---

DOM（Document Object Model）： 文档对象模型
其实就是操作 html 中的标签的一些能力

 我们可以操作哪些内容
  - 获取一个元素
  - 移除一个元素
  - 创建一个元素
  - 向页面里面添加一个元素
  - 给元素绑定一些事件
  - 获取元素的属性
  - 给元素添加一些 css 样式
  - ...
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

document对象 

---

• document对象属性

属性                  说明
title                文档标题，即title标签内容
URL                文档地址
fileCreateDate   文档创建日期
fileModifiedDate  文档修改时间（精确到天）
lastModified      文档修改时间（精确到秒）
fileSize           文档大小
fgColor            定义文档的前景色
bgColor           定义文档的背景色
linkColor         定义“未访问”的超链接颜色
alinkColor        定义“被激活”的超链接颜色
vlinkColor        定义“访问过”的超链接颜色 

• document对象方法

方法                                说明
document.write()                    输入文本到当前打开的文档
document.writeIn()                  输入文本到当前打开的文档，并添加换行符“\n”

获取html元素

---

方法

        1.获取标签元素的方法

                getElementById('title')

                        通过Id获取

                getElementsByClassName()

                        通过类名

                getElementsByTagName()

                        标签名

                getElementsByName

        2. querySelector 和 querySelectorAll

                querySelector()

                        css选择器

                        2.1 基本选择器

                                id class 标签

                        2.2 层级选择器

                                子代选择器 后代选择器

                                M > N         M N

                                兄弟选择器

                                M ~ N         M + n

                        2.3 伪类选择器

                                M N:nth-child(n)

                        2.4 属性选择器

                                input[name]

                                input[name='username']

操作元素内容 

---

1.获取标签元素

        getElement系列

                getElementById

                getElementByClassName

                getElementByTagName

                getElementByName

        querySelector系列

                querySelector

                        只返回一个元素

                querySelectorAll

                        返回所有元素存储在类数组中

2.类数组和数组Array区别

        1. 类数组不能使用Array的常用方法

                push         pop

        2. 类数组可以遍历，可使用[ ]访问元素

3.操作内容

        var h2Ele = document.querySelector(' #title ')

        h2Ele.innerHTML  //  获取内容

        h2Ele.innerHTML = ' 新内容 '  //  设置内容

        innerText  设置内容

        innerText  和  innerHTML  区别：

                1.innerText  以纯文本形式显示

                        <h3>innerText设置的内容</h3>

                        <h3>标签不会被解析

        value  表单元素内容

        <input  type = ' text '/>

        操作非表单元素  innerText  和  innerHTML

        操作表单元素  value

操作样式 

---

使用js代码动态操作样式

        1.行间样式  style

                element.style.样式名 = 样式值

        2.类样式

                element.className = 类名

                        注：后面的类名会覆盖前面的类名

                element.classList.add(类名1)

                element.classList.add(类名2)

                        ' 类名1  类名2 '

                获取非行间样式

                        window.getComputedStyle(元素).样式名

                                        =>样式值

操作属性 

---

js代码动态获取属性值或设置属性

        1.获取属性值

                element.getAttribute('属性名')

                        =>属性值

                element.属性        必须是本身拥有的属性

                        =>属性值

        2.设置属性

                element.setAttribute('属性名'，'属性值')

                element.属性名 = 属性值

        3.删除属性

                element.removeAttribute('属性名')

        4.自定义属性

                data-属性名（虽然不是规定，但大部分都是这么写的，算是默认的吧）

                        element.dataset.属性名

                                =>属性值

DOM节点对象 

---

从dom角度，整个html文档就是一个对象（document文档对象），文档中每个标签元素，以及元素的内容、属性、样式都是节点对象

节点对象分类

        常用（元素节点        文本节点        属性节点）        document文档节点  注释节点

html文档结构

        树形结构

节点关系

        父子关系        兄弟关系

获取节点 

---

节点分类

        元素节点        文本节点        属性节点

获取节点对象

        节点系列

                getElement系列

                querySelector系列

        层次结构

                父节点        ->  所有子节点        childNodes

                                   ->  firstChild

                                   ->  lastChild

                                   ->  元素子节点        children

                                   ->  firstElementChild

                                   ->  lastElementChild

                兄弟            ->  nextElementSibling（下一个节点）

                                   ->  previousElementSibling（上一个节点）

                                   ->  parentElement（获取当前节点的父节点）

                非常规节点        ->  document.documentElement（获取html根节点）

                                          ->  document.body（获取body节点）

                                          ->  document.head（获取head节点）

动态操作dom节点 

---

创建dom节点

        document.createElement(' div ')  //  <div></div>

        document.createTextNode(' 元素一 ')  // 文本节点

添加dom节点

        appendChild:是向一个元素节点末尾追加一个节点

                父节点.appendChild(子节点)

        insertBefore:向某一个节点前插入一个节点

                父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)

删除节点

        父节点.removeChild(字节点)

        节点.remove()

替换节点

        父节点.replaceChild(新节点，原节点)

克隆节点

        节点.cloneNode(true|false)

                true:复制节点包含节点下所有子节点

                false:复制当前节点