js事件/dom操作/定时

事件属性(event在事件方法中总是可用的)

onclick 单击

<button onclick="setBg(this)">按钮2</button>
<script>
function setBg(ele){
  document.body.style.backgroundColor='wheat';
  ele.style.backgroundColor="yellow";
  ele.textContent="保存成功";
}
</script>

onkeydown 按下键触发
submit 提交时触发
focus 获取焦点时触发
blur 失去焦点时触发
change 改变选择时触发
input 值发生改变触发

event

事件类型

event.type

事件绑定者(事件主体)

event.currentTarget

事件触发者(目标)

event.target

阻止事件冒泡(冒泡:依次触发上级事件)

event.stopPropagation();

阻止默认行为

event.preventDefault();

事件添加删除

.onclick = null 事件删除
.addEventListener(“click”,方法,是否冒泡); 添加事件侦听器

//案例
function show(){
  console.log(1);
}
btn2.addEventListener("click",show,false);

.removeEventListener(“click”,方法) 删除事件侦听器
.dispatchEvent(事件对象) 事件派发(触发事件)
new Event(‘click’) 创建一个自定义事件

先添加一个事件
let i = 0;
btn3.addEventListener("click",()=>{
  console.log(i);
  i += 1;
},false);
const myclick = new Event('click');
//派发是事件(调用一次btn3的myclick)
btn3.dispatchEvent(myclick);

自定义属性(data-xxx)

.dataset.xxx 获取自定义属性(注意:使用驼峰式获取如:data-work-unit .dataset.workUnit)

//案例
<button data-index="1" data-work-unit="php" onclick="getIndex(this)">btn1</button>
function getIndex(btn){
  //获取自定义属性值
  console.log(btn.dataset.index);
  console.log(btn.dataset.workUnit);
}

对象获取

querySelectorAll(css选择器) 一组

//案例
const items = document.querySelectorAll("ul > li");
for(let i = 0;i<items.length;i++){
  items[i].style.color = "red";
}

querySelector(css选择器) 一个
document.body 获取body
document.head 获取head
document.title 获取title
document.documentElement 获取html
document.forms 获取所有表单
(每个input,button都有一个form属性 ele.form)

<form id="login" >
<input type="text" name="email" >
</form>
//login是form.id
//email是input name值
//获取email input 元素
document.forms.login.email

DOM树节点

.children 获取子集元素
.firstElementChild 获取第一个子元素
.nextElementSibling 获取下一个兄弟元素
.previousElementSibling 获取上一个兄弟元素
.lastElementChild 获取最后一个元素
.parentElement/.parentNode 获取父节点

DOM元素增删改查

document.createElement(“ul”) 创建元素
document.body.append(ul); 添加元素到body中
.cloneNode(true) 克隆节点[true 为同时复制子元素]
.remove() 移除元素
.before(‘添加的元素’) 节点之前插入元素
.after(‘添加的元素’) 节点之后插入元素
.replaceChild 替换元素
.insertAdjacentElement(‘插入位置’,元素)

四个插入位置
afterBegin  :结束标签之前
beforeBegin :开始标签之前
afterEnd    :结束标签之后
beforeEnd   :接收标签之前

DOM元素内容操作

.textContent 获取元素内容(包括style/display:none内容)
.innerText 获取元素内容(不包括style/display:none内容)[不解析html字符串]
.innerHTML 获取元素内容(包括HTML标签)[可以解析html字符串]
.outerHTML 获取当前节点的自身html字符串

//留言板案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="留言内容" autofocus onkeydown="addMsg(this)" >
    <ul class="list" ></ul>
    <script>
        function addMsg(ele){
            if (event.keuy === 'Enter') {
                //1.获取留言列表的容器
                const ul = document.querySelector('.list');
                //2.判断留言是否为空
                if(ele.value.length === 0){
                    alert('留言内容不能为空');
                    ele.focus();
                    return false;
                }
                //3.添加一条新留言
                const li = document.createElement('li')
                li.textContent = ele.value;
                //添加删除留言功能
                li.textHTML = ele.value + "<button onclick='del()' >删除</button>"
                //插入
                // ul.append(li);
                ul.insertAdjacentElement('afterBegin',li);
                //4.清空留言的输入框,为下一次做准备
                ele.value = null;
                //5.重置焦点到留言框中,方便用户更次输入
                ele.focus();
            }
        }
        function del(ele){
            //删除前确认
            if(confirm("是否删除?")){
                //方案1
                ele.remove();
                //方案2
                // ele.outerHTML = null;
            }
        }
    </script>
</body>
</html>

css操作

window.getComputedStyle(元素) 获取元素所有样式属性
.style.css属性行内样式 [注意:使用驼峰式]

class操作

.classList.add(“calss”) 添加class
.classList.contains(“class”) 判断有没有class
.classList.remove(“class”) 移除class
.classList.replace(‘替换原’,’替换值’) 替换class
.classList.toggle(“class”) 切换class

定时

setTimeout 定时触发

setTimeout(()=>{
},2000);

setInterval 循环触发

setInterval(()=>{
},2000);

事件属性(event在事件方法中总是可用的)

event

事件添加删除

自定义属性(data-xxx)

对象获取

DOM树节点

DOM元素增删改查

DOM元素内容操作

css操作

class操作

定时

相关文章