JS 事件绑定

时间 2019-11-16

标签事件绑定栏目 JavaScript 繁體版

原文原文链接

查找标签：css

直接查找：html

document.getElementById('id'值)； // 返回值必定是标签对象
document.getElementsByClass('c1');//返回的是标签对象集合
document.getElementsByTagName('标签名') //根据标签名得到标签集合
document.getElementsByName; //根据name属性获取一个标签集合

导航查找：（依据某个标签订位其它标签）app

element.parentElement //父节点标签元素
element.children //全部子标签
element.firstElementChild　　//第一个子标签元素
element.lastElementChild //最后一个子标签元素
element.nextElementSibling //下一个兄弟标签元素
element.previousElementSibling//上一个兄弟标签元素

标签操做：this

文本操做：

　　取值操做google

　　　　console.log(ele_p.innerText); 文本 hellospa

　　　　 console.log(ele_p.innerHTML); 标签文档 <a herf=''>hello</a>操作系统

赋值操做htm

　　　　　ele_p.innerText='google';
对象

　　　　　ele_p.innerHTML='<a href=''>google</a>blog

属性操做

　　原生JS方式：

　　element.setAttribute(name,value)

　　element.getAttribute(属性名)

　　DHTML的简化方式：

　　　　element.属性名

　　　　element.属性名=’值‘

　　class操做：

　　　　<p class='c1 c2'>yuan</p>　　　

　　　　className

　　　　element.classList.add() //添加

　　　　element.classList.remove() //删除

　　css 样式操做：

　　　　element.style.css属性=值

　　value 值：

　　　　element.value

　　　　　　input textarea select

节点操做：

建立节点： document.createElement(标签名称）

　　　　　　　　var ele=document.createElement('input')

添加节点：父节点.appendChild(子节点)
删除节点：父节点.removeChild(子节点)
替换节点: 父节点.replaceChild(新节点，替换节点)
拷贝节点：element.cloneNode(true)

事件绑定：

<div onclick='foo(this)'>DIV</div>

function foo(self){

　　self //事件触发标签

}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p onclick="foo(this)">hello</p> <script> function foo(self){ alert(self.innerHTML) } </script> </body> </html>

　　　2.标签对象.on事件=function(){

　　 this //事件触发标签

　　　　　　　　}

　　　for (var i=o;i<eles.length;i++){

　　　　　　eles[i].onclick=function(){}

　　　　　　}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="p1">hello</p> <ul> <li class="item">111</li> <li class="item">222</li> <li class="item">333</li> </ul> <script> var ele_p=document.getElementById('p1'); ele_p.onclick=function(){ // alert(123) console.log(this) //打印的标签 }

JS事件：

操做系统：对下管理全部的硬件对上提供接口

event对象：保存的是与此次触发事件相关的具体信息

事件委派：

做用域链：