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流冒泡原理,将事件委派给父元素;通过触发父元素的事件,冒泡到子元素;从而不用给子元素设置事件;