24+25+26+27.常用获取DOM元素的几大方法+描述节点和节点之间关系的属性+元素对象常用的属性和样式操作+DOM操作之DOM的增删改

DOM简介：

DOM(文档对象模型 document Object modal): 提供一系列的属性和方法，可以供我们操作页面中的元素

    + 获取元素或者其他节点

    + 修改/获取元素的样式和内容等

    + 动态修改或者删除元素

    + .....

   

Node节点：

Node节点: 在页面中出现的任何内容都被称为节点

    + 元素节点:元素标签

        + nodeType:1

        + nodeName:大写标签名 tagName

        + nodeValue:null

    + 文本节点:文本内容+换行和空格

        + nodeType:3

        + nodeName:#text

        + nodeValue:文本内容

    + 注释节点:注释内容

        + nodeType:8

        + nodeName:#comment

        + nodeValue:#注释内容

    + document文档节点:document

        + nodeType:9

        + nodeName:#document

        + nodeValue:null

    +.....

 DOM树及常用方法:

25.描述节点和节点之间关系的属性:

 

26：元素对象常用的属性和样式操作：

属性+className:

 id：

 style:

真实项目:

27.DOM操作之DOM的增删改 

增删+自定义属性

 

 创建DOM元素
    + createElement 创建一个元素标签
    + new Image() 创建一个imd标签 等价于 document.createElement('img')
    + createTextNode 创建一个文本节点 
let spanBox = document.createElement('span')
spanBox.innerText = '你好'

 把创建的DOM元素插入到页面中
    + appendChild 向容器的末尾插入我们动态创建的内容
    + insertBefore 插入到容器中指定元素的前面 
box.appendChild(spanBox)
title.parentNode.insertBefore(spanBox, title)

删除元素
li4.parentNode.removeChild(li4)

给元素设置自定义属性
两种方案的本质是不一样的，不能混淆在一起来用,例如: 基于setAttribute设置的自定义属性,只能基于
getAttribute/removeAttribute来获取和删除，不能基于"成员访问的方式"来搞，同理基于成员访问给对象
设置的属性，也不能基于xxxAttribute来处理
    + 基于setAttribute设置的自定义属性值都是字符串

    + 元素.xxx=xxx 给当前元素对象中新增一个自定义属性
box.myIndex=0
console.log(box.myIndex);
    + 元素.setAttribute('xxx','xxx')  设置到元素标签上 (DOM结构上)
box.setAttribute('aaa',100)
console.log(box.getAttribute('aaa'));// '100' 或得到的是个字符串值
box.removeAttribute('aaa')