一个节点的原型链为：


一、document

document是windos对象的属性 
获取html元素的方法： 
console.log(document.documentElement)

二、节点属性

1.nodeType-----以数值返回节点类型


2.nodeName----指定节点的名称
3.tagName———仅能用于获取元素节点的名称
4.nodeValue———使用nodeValue或data函数获取节点值，也可以使用节点的data属性获取节点内容

三、节点集合

节点集合有两个：Nodelist 和 HTMLCollection 大部分功能相同 但也有所差异，如：
1.getElementsBy...等方法返回的是HTMLCollection
2.querySelectorAll 返回的是 NodeList

Nodelist 和 HTMLCollection 可使用 item 方法根据索引获取元素 也可以使用数组索引获取元素 
  const nodes = document.getElementsByTagName('div')
  console.dir(nodes.item(0))
  
  
  const nodes = document.getElementsByTagName('div')
  console.dir(nodes[0])
HTMLCollection 有 namedItem方法 可以按照name或id属性来获取元素 
const nodes = document.getElementsByTagName('div')
console.dir(nodes.namedItem('aaa'))
  
  const nodes = document.getElementsByTagName('div')
  console.dir(nodes['aaa']);
一般来说————————数字索引时使用item方法，字符串索引时使用namedItem方法
对于特定标签也有快速选择的方式：

四、节点关系

存在 父子 兄弟 祖先 后代等节点关系

但通过childNodes等获取的节点包括文本与注释，并不常用，一般使用只操作元素的方法：

注意：html标签的父节点是document 但父标签节点不存在 
<script>
  console.log(document.documentElement.parentNode === document) //true
  console.log(document.documentElement.parentElement) //null
</script>

五、选取节点

getElementById————只能通过document.getElementById访问，不能通过元素读取拥有ID的子元素。
getElementByName————返回一个NodeList节点列表对象
getElementsByTagName————返回一个HTMLCollection节点列表对象 不区分大小写
getElementsByClassName————设置多个值时顺序无关

六、遍历节点

forEach————Nodelist可以使用，但HTMLCollection不行
map—————节点集合对象原型中不存在map方法，但可以借用Array的原型map方法实现遍历 
  const nodes = document.querySelectorAll('div')
  Array.prototype.map.call(nodes, (node, index) => {
    console.log(node, index)
  })
Array.from——————将类数组转换为数组 第二个参数为迭代函数
for...of——————for of可用来遍历可遍历对象 因此可以用来遍历节点集合对象

七、样式选择器

样式选择器是之前忽略掉的一部分 在实际写项目时也没怎么用到 需要加深一下理解
querySelectorAll————获取Nodelist列表，但获取的是静态的
如下，获取id为a  class为b 属性age为c的元素集合
  const nodes = document.querySelectorAll(`#app .b[age='c']`)
querySelector——————获取单个元素
matches——————用于检测元素是否是指定的样式选择器匹配
closest——————查找最近的符合选择器的祖先元素（包括自身）

使用getElement...返回的都是动态的集合    使用querySelectorAll返回的是静态集合

八、元素属性

首先要区分开attribute 和  property
Attribute:是DOM元素在文档中作为html标签拥有的属性，如‘type’,'id','value','classNamle'以及自定义属性，它的值只能是字符串。
Property:是DOM元素在js中作为对象拥有的属性，可以直接使用DOM属性的方式进行操作 属性值为多类型
常用的Attribute，例如id、class、name等，已经被作为Property附加到DOM对象上，使用打点符 . 或者 [ ]  的方式获取。但是自定义的Attribute，就不能这样操作

但可是使用 Attribute 方法 对Property和Attribute都进行操作：
对于自定义属性，使用以data-为前缀的命名方式更方便操作：以data-为前缀的属性会被添加到属性集中，使用元素的dataset就可以获得属性集中的属性——如 app.dataset.content

总之：
property：修改对象属性 不会体现到html结构中   attribute：修改html属性 并且会改变html结构

九、管理节点

1.创建节点
就是先构建出一个DOM对象 ，再根据要求把这个对象添加（ .append ) 到已有的节点中
createTextNode——创建文本对象
<div id="app"></div>
<script>
  let app = document.querySelector('#app')
  let text = document.createTextNode('1111')
  app.append(text)
</script>
createElement——创建标签节点对象
 
<div id="app"></div>
<script>
  let app = document.querySelector('#app')
  let span = document.createElement('span')
  span.innerHTML = '1111'
  app.append(span)
</script>
createDocumentFragment——建虚拟的节点容器  不直接操作DOM 该节点的parentNode为null 可用来暂存文档节点 
cloneNode&importNode——用于复制节点对象操作 其中cloneNode是节点方法，能够实现深拷贝  importNode是document对象方法

2.节点内容
inneHTML————用于向标签中添加html内容 删除旧内容 使用新内容 同时触发浏览器的解析器重绘DOM 
outerHTML————不会删除原来的旧元素 只是页面中使用新内容
textContent与innerText————访问或添加文本内容到元素中
outerText————会影响所操作的标签
insertAdjacentText————将文本插入到元素指定位置，不会对文本中的标签进行解析。
插入位置有：

如： 
app.insertAdjacentText('beforebegin', '<h1>啦啦啦啦</h1>')
3.节点操作
（1）推荐方法
append
（内部）
节点尾部添加新节点或字符串
可同时添加多个内容，包括字符串与元素标签
prepend
（内部）
 节点开始添加新节点或字符串
before
（外部）
 节点前面添加新节点或字符串
after
（外部）
 节点后面添加新节点或字符串
replaceWith
将节点替换为新节点或字符串
app.replaceWith(h1)
remove
删除节点
  app.remove()
（2）insertAdjacentHTML

将html文本插入到元素指定位置，浏览器会对文本进行标签解析
其中的一个参数是位置  第二参数是新节点
beforebegin 元素本身前面
afterend 元素本身后面
afterbegin 元素内部前面
beforeend 元素内部后面
例：在div#app前添加HTML文本 
<div id="app">
</div>
<script>
  let app = document.querySelector('#app')
  let span = document.createElement('span')
  app.insertAdjacentHTML('beforebegin', '<h1>标题</h1>')
</script>
（3）insertAdjacentElement
将指定元素插入到元素的指定位置 
其中的一个参数是位置  第二参数是新节点
beforebegin 元素本身前面
afterend 元素本身后面
afterbegin 元素内部前面
beforeend 元素内部后面
如：在div#app 前插入span标签
 
<div id="app">
</div>
<script>
  let app = document.querySelector('#app')
  let span = document.createElement('span')
  span.innerHTML = '标题'
  app.insertAdjacentElement('beforebegin', span)
</script>

十、表单控制

JS为表单的操作提供了单独的集合控制
  • 使用document.forms获取表单集合
  • 使用form的name属性获取指定form元素
  • 根据表单项的name属性使用form.elements.title获取表单项，
  • 也可以直接写成form.name形式，不需要form.elements.title
  • 针对radio/checkbox获取的表单项是一个集合
例： 
<form action="" name="bt">
  <input type="text" name="title" />
</form>
<script>
  const form = document.forms.bt
  console.log(form.elements.title)
</script>

十一、样式管理

一般通过操作DOM更改class，从而将样式任务交给CSS处理
批量设置
使用JS的className批量设置样式
<div id="app" ></div>
<script>
  let app = document.getElementById('app')
  app.className = 'hdcms'
</script>
或通过设置特征的方式来更改
<div id="app"></div>
<script>
  let app = document.getElementById('app')
  app.setAttribute('class', 'bt')
</script>

classList
对类单独进行控制
node.classList.add    添加类名
如：
 let app = document.getElementById('app')
  app.classList.add('bt')
node.classList.remove    删除类名
node.classList.toggle    切换类名
node.classList.contains    类名检测
如：
app.classList.contains('container')
设置行样式
1.使用节点的style对象
如：
 app.style.backgroundColor = 'red'
2.使用 cssText属性
如：
 app.style.cssText = `background-color:red;color:yellow`
3.通过setAttribute改变style特征
app.setAttribute('style', `background-color:red;color:yellow;`)

获取样式
1.使用style属性读取
 app.style.backgroundColor
2.window.getComputedStyle
可获取所有应用在元素上的样式属性