JS-WEB-API 整理
2021-04-11 04:27
标签：rev elements 事件 利用 toc 占用 nbsp text add 常说的JS（浏览器执行的JS）包含两部分： 例如：页面弹窗是 window.alert(123)，浏览器需要做： 获取元素 document.geiElementById(id)，浏览器需要： 1、获取 2、property 修改的是JS对象的标准属性 3、attribute 修改获取的是HTML文档中标签的属性 新增节点，添加节点 获取父元素与子元素、移除节点 loaction & history IE低版本使用 attachEvent 绑定事件，和 w3c 标准不一样 按照DOM树形结构，由子级到祖级的顺序传播 案例：点击p1弹出激活，点击其他的弹出取消 激活 取消 取消 取消 取消 取消 事件代理就是在祖级DOM元素绑定一个事件，当触发子孙级DOM元素的事件时，利用事件流的原理来触发绑定在祖级DOM的事件。 JS-WEB-API 整理 标签：rev elements 事件 利用 toc 占用 nbsp text add 原文地址：https://www.cnblogs.com/anqwjoe/p/8993614.htmlJS-WEB-API
W3C标准中关于JS的规定有：
Document Object Model (DOM)
DOM节点操作
var a = document.getElementById("div1");
var b = document.getElementsByTagName(‘div‘);
var c = document.getElementsByClassName(‘.container‘);
var d = document.querySelectorAll(‘p‘);
DOM结构操作
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]);
BOM操作（Browser Object Model)
知识点
//检测浏览器类型
var ua = navigator.userAgent;
var isChrome = ua.indexOf(‘Chrome‘);
console.log(isChrome);
//screen 获取屏幕大小
console.log(screen.width);
console.log(screen.height);//拆解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‘);
})
事件冒泡
事件代理
完善通用绑定事件函数
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);
})代理的好处