dom（Document Object Model ）初

1，获取元素的api有哪些
哪些是针对于IE

window.id
documen.getElementById('id')
document.getElementsByTagName('id')
document.getElementsByClassName('id')[0]
/*以上三行针对于IE*/
documenr.querySelector('#id')
document.querySelectorAll('.id')[0]

增
（1）创建一个标签节点

let div=document.createElement('div')
document.createElement('style')
document.createEmlement('li')
document.createElement('script')

(2)创建一个文本节点

text1=document.createTextNode('hi')

(3)将文本插入标签

div.appendChild(text1)
div.innertext('hi')
div.textContent('hi')

(4)将标签加入页面（目前所创建的标签在JS线程中，要把它加入页面）

document.body.appendChild('div')
('已在元素').appendChild('div')

一个元素不能同时出现在两个地方，除非克隆一份

删
两种方法
```
parentNode.childChild('child')
//以前版本
childNode.remove('child')
//现在
```
把元素移除不等于删除，移除可以添加回来，如果想删除，就在移除后将节点设置为NULL浏览器就会自动的回收就真的删除了。

改
（1）改class

div.className='ni'//全覆盖
div.classList.add('ni')

（2）改style

div.style='width:50px;height:10px'//全覆盖
div.style.width=550px;

（3）在css中,改带有横杠的属性时，不要横杠将横杠后面的字母大写。

background-color=>backgroundColor

（4）改事件处理函数
div.onclick()事件的默认值是为null

<div id='div'></div>
/*=========是JS函数=====*/
div.onclick = function(){
  console.log(this)
  console.log(arguments[0])
}

this指的是ID为div的这个元素，argument[]这个数组存放了这个元素的事件
（5）改文本内容

div.innerText='xxx'
div.contenText='xxx'

(6)改HTML内容

div.innerHTML='<span>hi</span>'

(7)改标签
先清空在添加

div.innerHTMl=''
div.appendChild('div2)

(8)改爸爸

newParent.appendChild(div)

查
查爸爸

node.parentNode()
node.parentElement()

查爷爷

node.parentNode.parentNode()

查兄弟

node.parentNode.childNode()
node.parent.Childrent()

要遍历兄弟姐妹把自己排出去
查子代

node.childNode()
node.children()

查看老大

node.fristChild()

查看老幺

node.lastChild()

查看上一个姐姐/哥哥

node.previosSibling()

查看弟弟、妹妹

node.lastSibling()

遍历一个div里的所有元素

travle=(node,fn)=>{
fn(node)
if(node.childen){
for(let i=0;i<node.childen.length;i++){
travle(node.childen[i],fn)
}
}
}
travle(node,node=>{console.log(node)})

2，获取后的数据类型是，对象，所以会有原型，一个div除开自身的属性有六层的原型链；每一层原型都会添加一些属性。
div原型
3，节点和元素分别是什么
看某个元素的节点类型是什么

x.nodeType

这个能返回一个数字，这个数字会代表这个节点的数据类型。
- 1：表示Element
- 3：Text
- 8：表示注释comment
- 9:表示Document
- 11：表示文档片段DocumentFragment

4,document.all是第6歌falsy值
5,dom操作是夸线程的

（1）非标准属性是不会同步更新的，要以’data-‘为开头命名才会自动更新的。
6，porperty VS Attribute
porperty是JS线程里的属性
Attribute是渲染引擎里的属性
大部分情况下他们相等，但是attribute是只支持字符串，单数property支持字符串，布尔等类型。

相关文章