关于DOM

DOM

简介：(document object model)文本对象模型，它是html元素。提供访问和操作网页内容的方法和接口。
获取dom一共有8种方法
注：获取是元素要先初始化或者已存在。
1、4种动态获取方法：

document.getElementsByClassName();//通过class类名称获取元素，返回一个集合
document.getElementsByName()  //通过元素的name属性获取元素，返回的是一个集合
document.getElementById()  //通过元素的id获取，返回的是一个对象
document.getElementsByTagName()  //通过元素名称获取，返回的是一个集合

//集合里面获取某一个对象  使用键来获取
    console.log(btn[0]);
    console.log(btn[1]);
    console.log(btn[2]);

2、静态获取
只能获取到初始化时的元素，添加的元素获取不到

//他们当中的参数是css选择器，不可用name属性来获取
document.querySelector();//返回的是一个单个对象
document.querySelectorAll() //返回的是一个列表

3、其他两种获取方式

document.body;//获取body元素
document.documentElement;//获取html元素

获取dom之后进行操作

注：js操作dom不能操作一堆，只能单个操作，不能隐式迭代，所以要转化为单个对象进行操作
创建修改类名称

	 var btn = document.getElementsByClassName("btn")[0];
    console.log(btn);
    btn.name = "dom";  //修改或者设置name
    btn.className = "btn btninfo";//增加类名称，可同时增加多个

文本值操作

btn.innerText="修改文本";  //操作的文本
btn.innerHTML="修改文本";   //获取元素里面的子内容
//若为其修改的值中有标签，text以文本方式打印，html会自动解析再打印
console.log(btn.innerText);	//直接获取的是当前元素的文本值
console.log(btn.innerHTML);	//获取的是当前元素的子内容  包含html标签

获取行内样式和非行内样式

    console.log(btn.style.color);	//行内样式的获取方式
    btn.style.width="200px";	//给元素设置样式，为行内样式
  	btn.style.backgroundColor="pink";
  	//一次性设置多个样式，但要注意样式覆盖问题，它生效后之前的设置都无效
    btn.style="color:red;width:100px;height:30px;line-height:30px";
//获取元素的非行内样式：含有两个参数，第一个为获取该对象样式，第二个为查找元素伪元素（可有可无，或者直接写none也可）
window.getComputedStyle(对象).样式(如width);//获取对象的width样式
window.getComputedStyle(对象,":伪类").position;//获取对象伪类的position样式。
//只有元素的行内样式可修改，内嵌样式不可修改，因为样式为read-only只读的。

给元素设置自定义属性

btn.setAttricute("data-index",0);//给btn元素设置了一个data-index属性，其值为0。//设置自定义属性
btn.getAttribute("data-index");//获取自定义属性

dom元素的节点操作

<ul class="menu">
    <li class="list">第一个</li>
    文字
    <li class="list">第二个</li>
    <li class="list">第三个</li>
    <li class="list">第四个</li>
</ul>
<script>
    var menu=document.querySelector(".menu");
    console.log(menu);//获取ul
    console.log(menu.children);//获取ul里的所有子集
    console.log(menu.childNodes);//获取元素的子集节点（包含文本元素和符号）
</script>
//过滤子集节点
<script>
    for(var i=0;i<menu.childNodes.length;i++){
        console.log(menu.childNodes[i].nodeName);//获取节点名称
    }
    //nodeType是获取节点类别，标签的类型。nodeVaule是获取节点值，没有元素就是null，文本，符号，值
</script>

dom操作	作用
.firstChild	获取元素第一个子节点
.firstElementChild	获取元素第一个子元素
.lastChild	获取元素最后一个子节点
.lastElementChild	获取元素最后一个子元素
.parentNode	获取当前元素父节点
.parentElement	获取当前元素父元素
.parentNode.nodeType	获取当前元素父节点的类型
.parentElement.nodeType	获取当前元素父元素的类型

创建DOM元素

	var ele=document.createElement("button");
    console.log(ele);//创建一个元素，在控制台打印
    //设置相关属性
    ele.innerText="按钮";//设置其上文本内容
    ele.className="btn";//设置类名称
    document.body.appendChild(ele);//将其追加到网页里当前元素之后
    console.log(ele.className);//直接属性获取元素的class
    console.log(ele.classList);//是获取元素的类的集合
    ele.classList.add("btninfo");//给元素添加类
    ele.classList.remove("btn");//移除类
    console.log(ele.classList.contains("btn"));//检测是否存在某个类，返回值是true  false
    ele.classList.length  //输出类个数
    ele.classList.toggle("btn",false);//类别的切换，第二个参数为true  添加，false  删除
</script>

DOM元素的事件

事件属于对象的被动行为，方法称为主动行为。

鼠标事件	作用
mouseover	鼠标悬停
mouseup	鼠标抬起
mousedown	鼠标按下
click	单击鼠标
mouseleave	鼠标移出目标元素
mouseout	鼠标移开
mousemove	鼠标移动
mouseenter	鼠标进入目标元素
mousewheel	鼠标滚动滚轮

键盘事件	作用
keypress	键盘按键一次，按下又上来
keydown	键盘按下
keyup	键盘抬起

表单事件	作用
focus	获焦
blur	失焦
submit	提交
change	改变
input	获取用户输入事件

浏览器事件	作用
scroll	滚动条
load	加载完成
error	加载失败
resize	窗口大小变化
contentmenu	右键打开浏览器菜单

剪贴版事件	作用
cut	剪贴
copy	复制
paster	粘贴
selectstart	选择事件

事件的绑定方法

有三种：普通方式，动态绑定方式，监听的方式。
要注意的是，在js里写事件要全部在前面加on。
1、普通绑定
在元素上直接写事件，后面写方法调用。

<button onclick="btnhandle()">···</button>
<button id="btn">按钮</button>
<script>
    function btnhandle(){
        console.log(1);
    }
    //写成函数形式
    function fun(){
        var btn=document.getElementById("btn");
        btn.onclick=function (){
            console.log(btn);
        }
        btn=null;//手动回收
        fun();
</script>

2、动态绑定
获取dom元素再添加事件。要注意内存泄漏问题，删除元素后，把事件删掉，内存无法回收。

//单个事件绑定
<button id="btn">按钮</button>
<script>
	var btn=document.getElementById("btn");
	btn.onmousemove=function (){
	console.log("鼠标移动");

//多个元素动态绑定
<script>
//点击当前li  输出当前的元素
    var liele=document.getElementsByTagName("li");
    for(var i=0;i<liele.length;i++)
    {
        //用闭包来实现点击输出当前的i,点哪个输出哪个
       (function (n){
            liele[n].onclick=function (){
                console.log(n);
            }
        })(i);
</script>
//关联当前的i到当前对象的属性上
<script>
	liele[i].index=i;
        liele[i].onclick=function (){

            //事件里面的this指针指的是当前事件的执行对象
            console.log(this.index);//this指针是当前执行对象
        }
</script>

关于this
在js里写的全局变量和函数全属于window的属性，this指针直接指向window。还有构造函数中的this不属于window而属于js里的自定义对象。
js直接写this，函数的this，事件的this，构造函数的this，对象的this。
3、事件监听（不写on）
addeventlistener有三个参数，分别为事件类型，监听的函数，事件的冒泡和捕获。其中冒泡是由里向外执行，捕获是由外向里执行的，第三个参数只有两个值，true和false，true是捕获，false为冒泡。第三个参数不写时默认为冒泡。

<script>
btn.addEventListener("click",eventhandle);
    function eventhandle(){
        console.log("监听事件由里到外");
        this.removeEventListener("click",eventhandle);//事件监听移除
    };
</script>

处理冒泡事件三种方法
1、e.stopPropagation;阻止事件冒泡
2、return false;也阻止事件冒泡，是只在jQuery中使用
3、e.cancelBubble=true;设置为true 也可以阻止事件冒泡
处理事件默认行为

//禁止在浏览器上右键出现菜单
    window.oncontextmenu = function (e) {
        e.preventDefault();//阻止事件默认行为
       或return false;
        或e.returnValue = false;
    }
//禁止用户页面选择
        document.onselectstart=function (e){
            return false;
        }
 //阻止用户复制
        document.oncopy=function (e){
            console.log(e);
            return false;
        }
    //用户复制的时候添加信息
    var sellection;
    document.oncopy = function () {
        //获取你选则的对象
        sellection = window.getSelection();
        var part = "<br/>--------------------------------------" +
                "<br/>此文转载来自：<a href='www.baidu.com'>*****博客<a/>" +
                "<br/>-------------------------------------";
        var div = document.createElement("div");//此处div是在控制台创建了一个div标签
        div.style = "posiation:absolute; z-index=-999; opacity:0;";
        div.innerHTML = sellection + part;
        document.body.appendChild(div);
        sellection.selectAllChildren(div);
//移除创建的元素
        setTimeout(function () {
            div.remove();
        }, 10);
    }

事件的执行参数(event)
一般在控制台中查看

参数	含义
clientX,clientY	鼠标点击的位置相对于浏览器的位置坐标
layerX,layerY	鼠标点击的位置相对元素的偏移量
offsetX,offsetY	鼠标点击的位置相对元素的偏移量
pageX,pageY	鼠标点击的位置相对于浏览器的位置坐标
screenX,screenY	鼠标点击的位置相对屏幕的坐标
return Value true/false	当前事件执行成功后是否返回结果
src Element或target或to Element	出发的目标元素
time stamp	触发的时间，单位为ms
type	触发事件类型
which或keycode	值为ASCII码，鼠标事件

//判断滚轴是否上滑
window.onmousewheel=function(e){
	if(e.deltaY>0){
		鼠标上滑  
	}
	else···
}