js(2) DOM 操作

DOM

• 文档：一个页面就是一个文档； DOM 中用document 表示
• 元素：页面中所有的标签都是元素； DOM 中用element 表示
• 节点：网页中所有的内容都是节点（标签，属性，文本，注释等），DOM中用node 表示

element 元素操作

//根据id 获取
var pi =  document.getElementById('pi');
console.log(pi);

//打印元素对象的详细信息
console.dir(pi);

//获取多个元素，返回伪数组
var lis = document.getElementsByTagName("li");
console.log(lis);
//链式调用，获取指定父元素下的li 元素；
var lis2 = document.getElementById("list").getElementsByTagName("li");
console.log(lis2);

//根据类名选择
var h1 = document.getElementsByClassName("h1");
console.log(h1);

//通过选择器选择
var h2 = document.querySelector(".h1");
console.log(h2);
//选择所有
var lis3 = document.querySelectorAll("li");
console.log(lis3);

//获取body
console.log(document.body);

//获取html
console.log(document.documentElement);


//p标签 绑定点击事件
pi.onclick=function(){
    alert("pppp");
    //禁用点击事件
    this.disabled= true;
}

//改变p标签的内容
pi.onclick=function(){
    //两种都可以改变内容，但innerText 不能识别 html 标签；获取内容时，innerText 会去填标签和空格换行，html不会；
    // pi.innerText="inner pi";
    pi.innerHTML="<strong> span pi </strong>";  
}

var div = document.querySelector("div");
div.onclick=function(){
    //改的行内样式；
    this.style.backgroundColor="red";
}

var onfocus = document.getElementById("onfocus");
//获得焦点，即鼠标悬停
onfocus.onfocus=function(){
   if(this.value=="密码")
   this.value="";
}

//失去焦点 ，即鼠标离开
onfocus.onblur = function(){
    if(this.value=="")
   this.value="密码";
}


//获取元素属性
var id = document.querySelector("div");
//只能获取元素本来的属性比如id，class，value（input元素）
console.log(id.id);
//不仅可以获取元素本来的属性，还可以获取自定义属性
console.log(id.getAttribute("id"));
//例如获取自定义属性index
//自定义属性Html5 规定以date_ 开头；例如：date_index  
console.log(id.getAttribute("index"));

//设置，删除属性（只能删除自定义属性）同理，setAttribute()，removeAttribu();

node 节点操作

文档中的所有内容都是节点，比元素操作更便捷；但兼容性差

一般地，节点至少有 nodeType（节点类型），nodeName（节点名），nodeValue（节点值）这三个基本属性

• nodeType

• 元素节点 nodeType = 1

• 属性节点 nodeType = 2

• 文本（包括空格，换行）节点 nodeType = 3

  实际开发中，主要操作元素节点；

//node

//以下获取的都是节点而非元素
//获取父亲节点
div.parentNode;

//获取所有的孩子节点,返回一个数组，可通过nodeType=1 来获取元素
div.childNodes;  //标椎
//直接获取字元素节点（非标准）
div.children;

//获取第一个孩子，最后一个孩子
//节点
div.firstChild;
div.lastChild;
//元素
div.firstElementChild;
div.lastElementChild;

//获取下一个兄弟节点
div.nextSibling;
//获取下一个兄弟元素
div.nextElementSibling;

//获取上一个兄弟节点
div.previousSibling;
//获取上一个兄弟元素
div.previousElementSibling;

//动态创建节点
var newDiv = document.createElement("span");
//添加在div的孩子节点列表末尾
div.appendChild(newDiv);
//添加到指定孩子child的前面
div.insertBefore(newDiv,child);

//删除元素 remove
//删除指定孩子节点
div.removeChild(newDiv);

//克隆节点
//参数默认为false，只会克隆标签，不会克隆内容
//要想克隆内容，设为true；
div.cloneNode();

//如果页面文档流加载完毕，再调用document.write() 会导致页面重绘；
document.write("<p>Write!</p>");

注册事件

传统的注册方式： on开头的事件 ，比如 onclick，onfocus ， 这类事件具有唯一性，即同一个元素只能绑定一个onclick事件，即使绑定多个onclick，也会被覆盖掉；

新的注册方式：可绑定多个相同的事件；

• 方法监听注册方式 ： addEventListener( type，listener[ , useCapture]) ;
• type:事件类型 （字符串类型，去掉on，比如 click） listener：事件处理函数 useCapture：可选参数，默认false，DOM文档流顺序，false表示冒泡阶段；

div.addEventListener("click",function(){
    alert("监听点击事件1111！");
});


div.addEventListener("click",function(){
    alert("监听点击事件2222！");
});

div.onclick = function(){
    alert("点击一次!");
    this.onclick = null;

}


div.addEventListener("click",fn);

function fn(){
    alert("点击一次");
    //移除点击，只会被点击一次；
    div.removeEventListener("click",fn);
}

DOM事件流

DOM 事件流是页面中接受事件的顺序；

• 捕获阶段： 父级元素–》子级元素 即点击子盒子，子盒子的点击事件会先执行，再执行父元素（如果有）的点击事件；
• 冒泡阶段：子级元素–》父级元素 即点击子盒子，父盒子的点击事件（如果有）会先执行，再执行子元素的点击事件；

不是所有的事件都有冒泡阶段的，例如：onblur，onfocus，onmouseenter，onmouseleave

事件对象

我们的事件函数里的参数就是一个事件对象； 例如 onclick = function( event ){ }; 这里的event就是一个事件对象；事件对象是系统自动根据事件为我们创建的对象，

存在兼容性问题；

div.onclick= function(e){
    //输出鼠标点击相关信息
    console.log(e);

}

事件委托

利用DOM流冒泡原理，将事件委派给父元素；通过触发父元素的事件，冒泡到子元素；从而不用给子元素设置事件；