获取元素

document.getElementById("app");
document.getElementsByClassName("app2"); //注意是Elements不是ELement
document.getElementsBytagName("div");//同理
//注意,以上三种方法获取到的元素都是动态的(原生js里为数不多的动态部分)

var a = document.querySelector("#app"); 
var b = document.querySelector(".app2");//这里只返回第一个
var c = document.querySelector("div");//同理

var d = document.querySelectorAll(".app2");//这里返回的是伪数组
var e = document.querySelectorAll("div");//同理
//注意,以上五种都是静态的

var f = document.body;//获取body标签
var g = document.documentElement;//获取html标签

事件

link

属性对象

var dom = document.querySelector("div");
console.log(dom.id);//获取dom的id属性

console.log(dom.classList);//获取dom的class属性
dom.classList.add("t3", "t4");//动态添加class

console.log(dom.attributes);//获取dom的属性列表
console.log(dom.attributes[0].value);//获取第一个attr对应的内容,不建议使用textContent

console.log(dom.getAttribute("id"));//一般获取自定义属性,返回的是字符串,且不能修改
console.log(dom.getAttribute("class"));//返回的是字符串,极不友好

dom.setAttribute("id", "app2");
dom.setAttribute("class", "t1 t2 t3");//设置属性值

H5中默认自定义属性都是data开头的,同时H5中也有自定义的获取属性的方式

<div data-fuck1 = "123" data-fuck2 = "456"></div>
<script>
  var dom = document.querySelector("div");
  console.log(dom.dataset.fuck1);//123
  console.log(dom.dataset["fuck1"]);//123
</script>

样式属性

var dom = document.querySelector("div");

dom.style.backgroundImage = "url('./a.jpg')";
dom.style.width = "1000px";
dom.style.height = "1000px";
//style.样式可以控制css,但是是用camelCase
//style样式控制的是行内样式,权重高

dom.className = "ljntxdy zzytxdy";
//className是覆盖原来的class

节点操作

var fa = son.parentElement;//获取父亲节点

var son2 = fa.childNodes;//获取所有子节点, 注意,换行与空字符都算子节点
console.log(fa.firstChild);//第一个子节点,文本节点也算子节点
console.log(fa.lastChild.innerHTML);//最后一个子节点,文本节点也算子节点


var son3 = fa.children;//获取所有子节点,非标准但所有浏览器都支持,换行不算子节点
console.log(fa.firstElementChild.innerHTML);//文本节点不算子节点,但有兼容性问题
console.log(fa.lastElementChild.innerHTML);//同上
console.log(fa.children[0].innerHTML);//没有兼容性问题
console.log(fa.children[fa.children.length - 1].innerHTML);

var pre = son.previousSibling;//获取前一个节点,文本节点算
var nxt = son.nextSibling;
var pre1 = son.previousElementSibling;//文本节点不算,但有兼容性问题,ie9+才支持
var nxt1 = son.nextElementSibling;
function getpre(el) {//解决不兼容的问题,直接手写
  do {
    el = el.previousSibling;
  }while(el.nodeType != 1);
  return el;
}

创建、增删、克隆节点

创建、增加节点

关于创建元素的时间问题,用数组创建字符串,最后拼接一次的效率,优于createElement, 优于innerHTML += “

“(此操作会重新生成字符串)

var ul = document.getElementById("fa");

var li = document.createElement("li");
for(var i = 1; i <= 5; i++) {
  li.innerHTML = i;
  ul.appendChild(li);//只会增加一次
}
li.innerHTML = 8;//页面中的内容会被改


var li2 = document.createElement("li");
li2.innerHTML = 9;
ul.insertBefore(li2, ul.firstElementChild);//第一个参数是即将加入的节点,第二个参数是目标节点

删除节点

var a = document.querySelector("ul");
var b = a.removeChild(a.children[1]);//注意removeChild前面的元素不是document
//若删除成功会返回被删除的节点

克隆节点

var a = document.querySelectorAll("button")[0];
var clone = a.cloneNode(1);//参数为1时为深拷贝,会拷贝里面的元素,参数为0时为浅拷贝
var bd = document.querySelector("body");
bd.appendChild(clone);

事件高级

注册事件

onclick只能绑定一个事件

addEventListener可以绑定多个事件,其原型为document.addEventListener(event, function, useCapture)

菜鸟教程

var a = document.querySelector(".btn");
a.onclick = function() {
  alert(1);
}
a.addEventListener("click", ()=>{
  alert(2);
})

删除事件

var a = document.querySelector(".btn");
a.onclick = ()=> {
  alert(1);
  a.onclick = null;//直接使用=null即可,注意区分大小写
}

or-----

var a = document.querySelector(".btn");  
const fn = ()=> {
  alert(1);
  a.removeEventListener("click", fn);
}
a.addEventListener("click", fn);

dom事件流

addEventListener(“click”, function(), true/false)中第三个参数若为true则为捕获阶段,若为false则为冒泡阶段

var a = document.querySelector(".btn");
a.addEventListener("click", ()=>{
  alert(1);
}, true);
document.addEventListener("click", ()=> {
  alert(2);
}, true);//output: 2, 1

var a = document.querySelector(".btn");
a.addEventListener("click", ()=>{
  alert(1);
}, false);
document.addEventListener("click", ()=> {
  alert(2);
}, false);//output 1 2

事件对象

即记录事件相关信息的对象

var a = document.querySelector(".di");
a.addEventListener("click", (el)=>{
  console.log(el);
  console.log(el.clientX);
});
//这里的el就是事件对象

以下为一些常见的事件对象

target

var a = document.querySelector("ul");
a.addEventListener("click", function(el) {
  console.log(el.target); //ouput: <li>...</li>
  console.log(this);//output: <ul>...</ul>
});
//this指向绑定事件的对象
//el.target指向触发事件的对象

其他常见事件

  • 阻止冒泡
son.addEventListener("click", (el)=>{ 
  alert("son");
  el.stopPropagation();
})

事件委托

利用事件冒泡的原理,给父节点添加监听器,当点击子节点的时候,按事件冒泡的规则,父节点会监听到对应事件

若要拿到该节点,用el.target就可

var fa = document.querySelector(".btn");
fa.addEventListener("click", (el)=>{ 
  var son = el.target;
  son.style.backgroundColor = "pink";
});

常用鼠标事件

var banmenu = document.addEventListener("contextmenu", function(el) {
  el.preventDefault();//禁止右键菜单
})
var banselect = document.addEventListener("selectstart", function(el) {
  el.preventDefault();//禁止选中文字
})

鼠标事件对象

常用键盘事件

常用键盘事件对象

就一个, KeyCode可以返回按下键的ASCII码值,然后根据这个判读就好了

注意keyupkeydown不区分大小写,而keypress区分大小写


一只菜鸡