yy获取元素，也叫标签

window.idxxx 或者直接xxx   //直接用ID可以获取  比较简单好用 但是遇到window自带的（比如window.name）就不能用 找不到   ———常用———

document.getElementById('idxxx')  //ID获取  兼容IE用

document.getElementsByTagName('div') [0]    //通过标签名获取  兼容IE用

document.getElementsByClassName('red')[0] //通过类名获取  兼容IE用

document.querySlelctor('#idxxx') //获取单个 可以通过类名 ID名 或者标签 ———常用———

document.querySlelctroAll('.red')[0] //获取多个 ———常用———    它借用css 语法

获取特定元素

获取html元素

document.documentElement

获取head元素

document.head

获取body元素

document.body

获取窗口（窗口不是元素）

window

获取所有元素

document.all

这个document.all是个奇葩，第6个falsy值

节点  元素 分不清

节点Node 包括以下几种

1 表示元素Element,也叫标签Tag

3 表示文本Text

8 表示注释Comment

9 表示文档Document

11 表示文档文档片段DocumentFragment

重点记1和3

创建元素的 API

第一种方法

let div1 = document.createElement('div')  //创建标签

let text1 = document.createTextNode('你好')
div1.appendChild(text1)

第二种方法

let div1 = document.createElement('div')  //创建标签

div1.innerText = '你好' 或者 div1.textContent='你好'

插入页面中  

新创建的标签默认处于JS线程中 

你必须把它插到head或者body里面，它才会生效

document.body.appendChild(div)
或者 已在页面中的元素.appendChild(div)

appendChild   

例： 页面中有div#test1 和 div#test2

let div = document.createElement('div')
test1.appendChild(div)

test2.appendChild(div)      //得到的结果是 div在test2里面   一个元素不能出现在两个地方 除非你把它复制一份

let div2 = div1.cloneNode(true) 克隆节点  //里面不带参数false或者带参数true

删除某个元素

旧方法：parentNode.removeChild(childNode)

新方法：chaidNode.remove()  //后来的比较好用  但是IE不兼容  

改属性

    写标准属性

改class:div.className = 'red blue' (全覆盖)  //div.chassName+='green'  //打印出red blue green三个类

改class: div.classList.add('red')     //在原来的类名上面增加属性

改style: div.style = 'width:100px;color:blue;'

改style的一部分: div.style.color = 'red' 

大小写：div.style.backgroundColor = 'red' //遇到-  用驼峰命名

改data-*属性： div.dataset.x = 'frank'

读标准属性

div.classList / a.href

div.getAttribute('class') / a.getAttribute('href')

两种方法都可以 但是建议用第二种   因为第一种 a.herf的话 浏览器会自动给你加东西 第二个a.getAttribute不会

改

改文本内容

div.innerTex = '修改内容1innerText' 

div.textContent = '修改内容2种方式 textContent'

改HTML内容

div.innerHTML = '我是可以增加标签的哟 并且可以识别<i>这是i标签展示为斜体字</i>'

改标签

div.innerHTML = '' //清空div里面的内容

div.appendChild(div2) //把需要的内容添加进去   如下图

控制台显示 写法

    修改新父元素

newParent.appendchild(div)     //以前的div 直接从父元素里面消失 到新的父元素里面去

查

查爸爸

node.parentNode 或者 node.parentElement

查爷爷

node.parentNode.parentNode (查几级加几个parentNode)

查子代

node.childNodes 或者 node.children   当子代变化时  如果两者也会实时变化  

但是如果用querySeletorAll 不会实时更新

查兄弟姐妹

node.parentNode.childNodes   还要排除自己

node.parentNode.children 还有排除自己

查看老大（第一个）

node.firstChild

查看老幺（最后一个）

node.lastChild

查看最近的一个兄弟远不（哥哥）

node.previousSibling

查看下一个元素（最近的弟弟）

node.nextSIbling

属性同步

标准属性

对div1的标准属性的修改，会被浏览器同步到页面中

比如 id  className title等

data-* 属性

同上 会被浏览器同步到页面中

非标准属性

对非标准属性的修改，则只会停留在JS线程中

不会同步到页面里

比如x属性  实例代码如下图

启示

如果你有自定义属性，又想被同步到页面中，请使用data-作为前缀

本图来自饥人谷教学内容

Property  vs  Attribute

property 属性

JS线程中div的所有属性 ，叫做div的property

attribute 也是属性

渲染引擎中的div对应的标签的属性，叫做attribute 

区别

大部分的时候，同名的property 和 attribute值相等

但如果不是标准属性，那么它俩只会在一型时相等

但注意 attribute 只支持字符串

而property支持字符串 布尔等类型