DOM和节点学习笔记

Dom

dom是一个接口，可以改变文档对象，标签名

获取元素；

1. 通过标签名来获取元素

getElementByTagName返回的是，获取过来的元素对象的集合，用伪数组的形式来存储，不仅可以使用document来获取，

还可以使用父元素来获取其内部所有指定标签名的子元素,也就是

fatherElement.getElementByTagName('标签名');但是不包含父元素自身

2. 通过Id值来获取元素

由于id值，在整个网页当中是唯一的，所以document.getElementByID('id')取得的元素也是唯一的

3. 通过类名来获取元素

document.getElementByClassName('')通过类名来获取元素的集合

4. 新增选择器

querySelector()返回指定选择器的第一个元素对象

• 通过Id来获取 querySelector('#id');

• 通过class属性来获取querySelector('.class');

• 通过标签名来获取querySlector('a/span/li......');

如果想要获取元素的集合，使用querySelectorAll(''),书写形式同上，但是返回的是一个集合

5. 获取body元素，获取html元素

var bodyEle=document.html

如果想要获取html元素，

var htmlEle=document.documentElem;

样式属性操作

element.style 行内样式操作

element.className 类名样式操作

innerText和innerHTML的区别

innerText不识别html标签，保留空格和换行，非标准，一般使用

innerHTML识别html标签，不会保留空格和换行，使用最多

//改变之前
.before{
  width:100px;
 height:100px;
}

.after{
    width:200px;
    height:13px;
}

var box=document.querySelector('.box');
box.onclick=function(){
    this.className='after';
    //当前元素的类名改成了after;

    //如果想要保留原先的类名,也就是使用多类名选择器，只需要在中间添加一个空格
    this.className='first change';
}

dom事件流包含三个阶段：

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

dom的注册事件（绑定事件）

给元素添加事件，称为注册事件，或者绑定事件

方法：传统方法和方法监听注册方式

方法监听注册方式

w3c标准 推荐标准

addEventListener()它是一个方法

eventTarget.addEventListener(type,listener.useCapture)

type:事件类型字符串，比如click,mouseover，注意这里不要带on

listener:事件处理函数.事件发生的时候，会调用该监听函数

useCapture:可选参数，是一个布尔值，默认是false

删除事件，或者是解绑事件

件，可以用 dom.onclick = null来解绑 通过addEventListener绑定的事件可以使用removeEventListener来解绑，接受参数-样对于使用removeEventListener函数解绑事件,需要传入的listener，useCapture和addEventListener完全一致才可以解绑事件。

那些节点操作

1. 节点操作之父节点：

parentNode（）用于获取距离子节点最近的父节点

2. 节点操作之子节点

childrenNode（）返回的是一个集合，包含所有的元素节点，文本节点，（也就是包含空格和换行）所以，一般不提倡使用，如果使用的话，一般使用nodeType来判断是否是元素节点

if(ul.childNode[i].nodeType==1){//如果是1的话，就证明ul的第一个子节点是元素节点
console.log(ul.childNode[i]);
}

由于比较麻烦，一般使用children来获取所有的元素节点，这也是实际开发中经常使用的方法

2.1获取第一个子节点

firstChild

获取第一个元素子节点

fistElementChild

2.2获取最后一个子节点

lastChild

获取最后一个元素子节点

lastElementChild

创建节点

其中node.appendChild（child）是添加元素节点

var li=document.creatElement('li');//创建元素节点

var ul=document.querySelector('li');

ul.appendChild(li);

删除节点

node.removeChild(child)

ul.removeChild(ul.children[0])删除第一个子节点

var btn=document.qurySelector('btn');
var ul=document.qurySelector('ul');

//点击元素，依次删除里面的孩子
btn.onclick=function(){
if(ul.children.length==0){//当父元素中没有孩子的时候，设置它的disabled属性为true
 this.disabled=true;
}else{
ul.removeChild(ul.children[0]);
}


}

复制节点

node.cloneNode()

var ul=document.querySelector('li');

var lili=ul.children[0].cloneNode();//此时括号里面为空，
//或者是false。则是浅拷贝，也就是之复制节点本身，不能复制里面的子节点（内容）
//括号里面是true则是深拷贝，复制标签里面的内容
ul.appendChild(lili);//复制节点之后讲节点添加到父节点当中

三种动态创建元素的方法

1. document.write()创建元素

使用这种方法来创建一个div，div里面的盒子内容是123

document.write('<div>123</div>');

但是当文档流全部执行完毕，它会导致页面全部重绘

2.使用innerHTML来创建标签

for(var i=0;i<=100;i++){

 inner.innerHTML+='<a href="#" >百度</a>'
//
}

3.使用document.createElement()创建元素

var create=document.querySelector('.create');
var a=document.createElement('a');
create.appendChild(a);
//创建完节点，把它放在父盒子的下面

但是如果要添加100个子盒子或者是更多，需要考虑到效率的问题

由于字符串的拼接比较方便，所以，执行效率相比createElement来说，比较高，所以想到使用InnerHTML中追加元素来进行优化，优化后的效率是高于innerHTML的

经典面试题，三者的区别