标签：rev elements 事件 利用 toc 占用 nbsp text add
常说的JS（浏览器执行的JS）包含两部分：
例如：页面弹窗是 window.alert(123)，浏览器需要做：
获取元素 document.geiElementById(id)，浏览器需要：
1、获取
var a = document.getElementById("div1"); var b = document.getElementsByTagName(‘div‘); var c = document.getElementsByClassName(‘.container‘); var d = document.querySelectorAll(‘p‘);
2、property
修改的是JS对象的标准属性
3、attribute
修改获取的是HTML文档中标签的属性
新增节点，添加节点
var div1 = document.getElementById(‘div1‘); //添加新节点 var p1 = document.createElement("p"); p1.innerHTML = ‘this is p1‘; div1.appendChild(p1); //添加创建的新元素 //移动已有节点 var p2 = document.getElementById("p2"); div1.appendChild(p2);
获取父元素与子元素、移除节点
var div1 = document.getElementById("div1"); var parent = div1.parentElement; var child = div1.childNodes; //移除节点 div1.removeChild(child[0]);
//检测浏览器类型
var ua = navigator.userAgent; var isChrome = ua.indexOf(‘Chrome‘); console.log(isChrome); //screen 获取屏幕大小 console.log(screen.width); console.log(screen.height);
loaction & history
//拆解URL各部分
//loaction console.log(location.href); //当前域名
console.log(location.host); //当前域名
console.log(location.protocol); //协议 http: console.log(location.pathname); //当前分目录名 console.log(location.search); // 查询部分：‘？’之后部分 console.log(location.hash); //‘#’ 后面的字符 //history history.back(); history.forward();
var btn = document.getElementById(‘btn1‘); btn.addEventListener(‘click‘,function(event){ console.log(‘clicked‘); }); function bindEvent(elem,type,fn){ elem.addEventListener(type,fn); } var a = document.getElementById(‘link1‘); bindEvent(a,‘click‘,function(e){ e.preventDefault(); alert(‘clicked‘); })
IE低版本使用 attachEvent 绑定事件，和 w3c 标准不一样
按照DOM树形结构，由子级到祖级的顺序传播
案例：点击p1弹出激活，点击其他的弹出取消
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
<script type="text/javascript">
var p1 = document.getElementById(‘p1‘);
var body = document.body;
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn);
}
bindEvent(p1,‘click‘,function(e){
e.stopPropagation();
alert(‘激活‘);
})
bindEvent(body,‘click‘,function(){
alert(‘取消‘);
})
事件代理就是在祖级DOM元素绑定一个事件，当触发子孙级DOM元素的事件时，利用事件流的原理来触发绑定在祖级DOM的事件。
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<!-- 会随时新增更多的 a 标签 -->
</div>
<script type="text/javascript">
var div1 = document.getElementById(‘div1‘);
div1.addEventListener(‘click‘,function(e){
//target属性返回触发该事件的节点
var target = e.target;
//nodeName返回的标签名都是大写
if(target.nodeName == ‘A‘){
alert(target.innerHTML);
}
})
</script>
function bindEvent(elem,type,selector,fn){ if(fn == null){ fn = selector; selector = null; } elem.addEventListener(type,function(e){ var target;
//使用代理 if (selector){ target = e.target;
//如果target是指定的选择器 if(target.matches(selector)){
//让target使用fn的方法，修改this的指向 fn.call(target,e); }
//不使用代理 }else{ fn(e); } }) } //使用代理 var div1 = document.getElementById(‘div1‘); bindEvent(div1,‘click‘,‘a‘,function(e){ console.log(this.innerHTML); }) //不使用代理 var a = document.getElementById(‘a‘); bindEvent(div1,‘click‘,function(e){ console.log(a.innerHTML); })
标签：rev elements 事件 利用 toc 占用 nbsp text add
原文地址：https://www.cnblogs.com/anqwjoe/p/8993614.html
