dom元素

如何获取dom元素
dom 全称是document object model 文本对象模型 简称dom元素，dom就是html元素
获取dom元素的时候需要注意什么，注意dom元素是否初始化（是否已经存在）

一.四种动态获取dom的方法
1.通过class 类名称获取元素 返回的是一个HTMLCollection集合
document.getElementsByClassName() var btn=document.getElementsByClassName("list");console.log(btn[0]);
2.通过元素的name属性获取元素 返回的是一个NodeList集合
document.getElementsByName() var btnname=document.getElementsByName("buttoninfo");console.log(btnname[0]);
3.通过元素的id获取 返回的是一个对象
document.getElementById() var btnid=document.getElementById("btn");//返回的是一个对象 console.log(btnid);
4.通过标签名称获取 返回的是一个HTMLCollection集合
document.getElementsByTagName() var ele=document.getElementsByTagName("button");console.log(ele[0]);

二.四种静态获取dom的方法
1.参数是css选择器 返回的是一个单个对象
document.querySelector(); var btnc=document.querySelector(".list");console.log(btnc);
2.参数是css选择器 返回的是一个NodeLIst集合列表
document.querySelectorAll()； var btnq=document.querySelectorAll("#btn");console.log(btnq);
3. 获取body元素固定对象获取
document.body console.log(document.body);
4.获取HTML元素
document.documentElement console.log(document.documentElement);

dom元素创建
用来代码添加一个元素到网页
var btnlist=document.createElement(“button”);
btnlist.name=“buttoninfo”;
btnlist.className=“list”;
document.body.appendChild(btnlist); 将btnlist加到网页中
获取元素的class
console.log(ele.className);
获取元素的类的集合
console.log(ele.classList);
给元素添加类
ele.classList.add(“btninfo”);
移除类
ele.classList.remove(“btn”);
检测是否包涵某个类 返回值是true false
console.log(ele.classList.contains(“btn”));
输出类个数
console.log(ele.classList.length );
类别的切换，根据第二个参数 true添加 false删除
console.log(ele.classList.toggle(“btn”,false));

操作dom元素
js操作dom，只能单个操作，不能进行隐式迭代

<button class="btn">按钮</button>
var btn = document.getElementsByClassName("btn")[0];
console.log(btn);
btn.name = "dom";  //修改或者设置name
btn.className = " btninfo";//类赋值的时候，直接给值进行覆盖，修改或者设置

1.文本值操作 修改或者设置文本
btn.innerText=“修改文本”; //操作的对象是文本
btn.innerHTML=“修改文本”; //操作的对象是元素里面的子内容
2.获取当前元素的文本值
console.log(btn.innerText);
获取当前元素的子内容，包含html标签
console.log(btn.innerHTML);
3.会自动解析字符串里面的标签
btn.innerText=“按钮”;
btn.innerHTML=“按钮”;

4.行内样式的获取方式
console.log(btn.style.color);
非行内样式元素的获取方式
console.log(window.getComputedStyle(btn).width);
获取的当前元素对象的伪元素的样式
console.log(window.getComputedStyle(btn, “:after”).position);
只有元素的行内样式可修改，非行内样式不能修改（因为非行内样式为read-only）

5.给元素设置自定义属性以及获取
btn.setAttribute(“data-index”, 0);//设置自定义属性
获取自定义属性
console.log(btn.getAttribute(“data-index”));

6.dom元素节点操作
获取ul里面的子集
console.log(menu.children); //获取父元素的所有子集元素（htmlcollection集合）
console.log(menu.childNodes); //获取的是元素的子集节点 节点包含文本、元素、符号（nodelist集合）
过滤子集节点
console.log(menu.childNodes[i].nodeName);//获取节点名称
console.log(menu.childNodes[i].nodeType);//获取节点类型 标签类型 1
console.log(menu.childNodes[i].nodeValue);//获取节点文本，符号，值 （元素没有时是null ）
字符串大小写
toLowerCase() 大写转化为小写
toUpperCase() 小写转大写

  if (menu.childNodes[i].nodeName.toLowerCase() == "li") {
            console.log(menu.childNodes[i]);
        }

7.dom子父元素操作
console.log(menu.firstChild); //获取元素的第一个子节点
console.log(menu.firstElementChild);//获取元素的第一个子元素
console.log(menu.lastChild); //获取元素的最后一个子节点
console.log(menu.lastElementChild);//获取元素的最后一个子元素
元素的父元素
console.log(menu.parentNode);//获取当前元素的父节点
console.log(menu.parentElement);//获取的是当前元素的父元素
console.log(menu.parentNode.nodeType);获取父元素节点类型（标签1）
console.log(menu.parentElement.nodeName);获取body

dom元素事件及动态绑定、监听
事件：对象的被动行为（主动行为称方法，被动的行为称事件）
事件方式：普通方式、动态绑定、监听
一、普通方式
鼠标事件： mouseover mouseup mousedown click dbclick mouseleave mouseout mousemove mouseenter mousewheel（滚轮）
键盘事件：keypress keydown keyup
表单事件：focus blur submit change input(获取用户输入事件)
浏览器事件 scroll load error resize contentmenu(右键打开浏览器菜单)
剪贴版事件 cut（剪贴） copy（复制） paster(粘贴) selectstart 选择事件
在元素上直接写事件 在元素上写事件 后边写方法调用 名称()；

<button onmouseenter="enterbtn()">按钮</button>
 function enterbtn(){
        console.log("鼠标进入");
    }

二、动态绑定

<button id="btn">按钮</button>
<ul>
    <li>第一节</li>
    <li>第二节</li>
    <li>第三节</li>
    <li>第四节</li>
    <li>第五节</li>
</ul>
//写法一
var btn=document.getElementById("btn");
  btn.onclick=function (){
  console.log("btn");
  }
//写成函数的形式
function fun()
{
var btn=document.getElementById("btn");
btn.onclick=function (){
console.log("btn");}
}
fun();

//点击当前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);
  //写法二，关联当前的i  到当前对象的属性上
      liele[i].index=i;
      liele[i].onclick=function (){
     //事件里面的this指针指的是当前事件的执行对象
      console.log(this.index);}
}

移除动态绑定
btn.οnclick=null;

三、监听
1.监听btn的click事件
监听的函数 addEventListener，监听的时候事件不写on
btn.addEventListener(“click”,function (){
console.log(“监听”);
});

2.事件的捕获和冒泡
事件的冒泡原理：由里向外冒泡
事件的捕获原理：由外向里捕获
第三个参数不写默认是false冒泡 true为捕获（btn.addEventListener(“click”,function (){ },true);）

3.处理冒泡事件
阻止冒泡
btn.onclick = function (e) {
1.e.stopPropagation(); //阻止事件冒泡
2.return false;//jquery里面使用的
3.e.cancelBubble = true; //设置为true阻止事件冒泡
}
阻止默认行为（阻止右键打开菜单）
window.oncontextmenu = function (e) {
1.e.preventDefault();//阻止事件默认行为
2.return false;
3.e.returnValue = false;
}

事件的执行
事件的执行参数 event(e)
btn.οnclick=function (e){
console.log(e);
}
event 代表事件的执行参数对象
鼠标事件输出参数是mouseevent对象
clientx clienty 指的是当前点击的位置相对浏览器的坐标
layerx layery 指当前的点击位置相对元素的偏移量
offsetx offsety 指当前点的位置相对元素的偏移量
pagex pagey 当前的位置相对浏览器的坐标
screenx screeny 当前的位置相对屏幕的坐标
returnValue true/false 当前事件执行成功之后是否返回结果
srcElement target toElement 触发的目标元素
timeStamp 触发的时间 ms单位
type 触发的事件类型
which 值是ascii 鼠标事件全是1

滚轴事件
window.onmousewheel=function (e)
{
//滚轴里面  判断上滑和下滑  deltaY
if(e.deltaY>0)
{console.log("下滑");}
else{console.log("上滑");}
}

this指针
1.直接写的this
console.log(this);//window
2.元素事件里面的this 指向的是当前事件的执行对象
document.body.οnkeypress=function (){
console.log(this);//直接指向body
}
3.函数里面的this
function method(){
console.log(this);//window
}
method();
在js里面写的全局变量和函数 全部属于window的属性 this直接window
var count=0;
console.log(window.count);//全局变量是window的属性
window.method();
4.属于js里面的自定义对象 构造函数 this指向对象
① function person(){
this.name=“张三”;
this.eat=function (){
console.log(“吃饭”);
}
}
var p=new person();
console.log§;
②var obj={
sleep:function (){
console.log(this);//obj
}
};
obj.sleep();