DOM操作指南-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45556724/article/details/102873346

DOM的介绍
- Document Object Model(文档对象模型)
- 每一个页面都有一个document对象，它是通过文档对象模型具体化的一个对象。它可以操作页面中的所有内容。

修改元素样式： 元素.style.backgroundColor = “yellow”;
获取样式：

document.getElementById() => 根据ID获取元素  返回值是元素对象
document.getElementsByTagName() =>根据标签名获取元素   返回值是集合(类数组对象)
document.getElementsByName() =>根据name属性获取元素   返回值是集合(类数组对象)
document.getElementsByClassName() => 返回值是集合(类数组对象)
document.querySelector() => 根据类名获取元素 返回的是元素
document.querySelectorAll() => 返回值是集合(类数组对象)

** HTML属性**
可以分为标准属性与非标准属性(自定义属性)

标准属性指的是由W3C制定的属性
- 通用属性所有标签都有的属性比如 id class style title等
- 特有属性只有一个或者几个标签有的属性比如 name type checked 等
非标准属性指的是由程序员自己定义的属性
元素的基本操作
标准属性可以直接通过元素打点获取打点修改 (或者使用方括号语法也可以)
注意避讳关键字

    // 避讳JS中的class关键字
    元素.className = "abc";
    // 读取name属性值
    var str = 表单元素.name;

非标准属性要通过

- setAttribute(propName, propValue); 设置、修改属性值
    - propName 表示属性名
    - propValue 表示属性值
- getAttribute(propName); 获取属性值
    - propName 表示属性名
- removeAttribute(propName); 移除属性(从HTML标签身上移除)
    - propName 表示属性名

节点的属性

nodeType 节点类型属性值为数字
- 1 表示元素节点
- 2 表示属性节点
- 3 表示文本节点
- 8 表示注释节点
- 9 表示文档节点(就一个 document)

获取属性节点要通过 元素.attributes 来获取到集合再通过下标获取想要的属性节点

nodeName 节点名称属性值为字符串
- 元素节点的名称为大写的标签名
- 属性节点的名称为属性名
- 文本节点的名称为 #text
- 注释节点的名称为 #comment
- 文档节点的名称为 #document
nodeValue 节点值
- 元素节点没有节点值 null
- 属性节点的节点值就是属性值
- 文本节点的节点值是文本内容
- 注释节点的节点值是注释内容
- 文档节点没有节点值 null
- 节点的关系
  节点关系就两种：父子关系兄弟关系

- 父子关系
    - 父找子 
        - childNodes 所有的节点
        - children 所有的元素节点
        - firstChild 第一个节点
        - firstElementChild 第一个元素节点
        - lastChild 最后一个节点
        - lastElementChild 最后一个元素节点
    - 子找父
        - parentNode 父节点
- 兄弟关系
    - nextSibling 下一个兄弟
    - nextElementSibling 下一个元素兄弟
    - previousSibling 前一个兄弟
    - previousElementSibling 前一个元素兄弟

节点的操作

创建节点

document.createElement(标签名字符串)
document.createTextNode(文本内容)

    // 创建一个div元素节点
    var div = document.createElement("div");
    // 创建文本节点
    var textNode = document.createTextNode("我是一个通过JS脚本创建出来的文本节点");
    // 这样的节点只在JS环境中存在,还没有到DOM树上去.所以叫做"孤儿节点"

追加节点

父元素.appendChild(子元素)
- 子元素会被追加到父元素的最后,作为lastChild节点

    // 创建一个节点
    var div = document.createElement("div");
    // 向父元素中追加一个节点
    var dom = document.getElementById("#box");
    dom.appendChild(div);

插入节点

父元素.insertBefore(newChild, oldChild)
- newChild是新元素
- oldChild是父元素的已有元素
- newChild会插入到oldChild的前一个位置

    // 创建一个节点
    var div = document.createElement("div");
    // 获取父元素
    var box1 = document.getElementById("box1");
    // 插入到box1之前
    document.body.insertBefore(div, box1);

替换节点

父元素.replaceChild(newChild, oldChild)
- newChild是替换上的元素
- oldChild是被替换的元素

    // 创建一个节点
    var div = document.createElement("div");
    // 获取树上的元素
    var box1 = document.getElementById("box1");
    // 替换box1
    document.body.replaceChild(div, box1);

克隆节点

元素.cloneNode(boolean);
- boolean是一个布尔值决定是否克隆子元素如果为真则克隆子元素否则不克隆默认是false

    // 选中一个节点
    var node = document.querySelector(".one");
    // 复制该节点得到新节点
    var cloneNode = node.cloneNode(true);

删除节点

元素.remove() 让调用remove方法的元素下树
父元素.removeChild(子元素) 让父元素中的子元素下树

    // 获取元素
    var box2 = document.getElementById("box2");
    // 元素自己下树
    box2.remove();

    // 获取元素
    var box2 = document.getElementById("box2");
    // 让body把box2删掉
    document.body.removeChild(box2);