JS Web API

最新推荐文章于 2024-05-05 13:32:24 发布

WWWln1234

最新推荐文章于 2024-05-05 13:32:24 发布

阅读量248

点赞数

分类专栏： JS Web API 文章标签： JS Web API

本文链接：https://blog.csdn.net/sinat_32308611/article/details/89791580

版权

JS Web API 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS基础知识：ECMA 262标准

JS-Web-API：W3C标准

W3C标准中关于JS的规定有：

DOM操作、BOM操作、事件绑定、ajax请求（包括http协议）、存储

页面弹框是window.alert(123)，浏览器需要做：

定义一个window全局变量，对象类型
给它定义一个alert属性，属性值是一个函数

获取元素document.getElementById(id)，浏览器需要：

定义一个document全局变量，对象类型
给它定义一个getElementById的属性，属性值是一个函数

但是W3C标准没有规定任何JS基础相关的东西，不管什么变量类型、原型、作用域和异步，只管定义用于浏览器中JS操作页面的API和全局变量

全面考虑，JS内置的全局函数和对象有哪些？

Object Array Boolean String Math JSON等,window document，接下来还有navigation.userAgent

浏览器执行的JS包含两部分：JS基础知识（ECMA262标准）、JS-Web-API（W3C标准）

1.DOM操作

DOM document object model文档对象模型

DOM是哪种基本的数据结构？
DOM操作的常用API有哪些？
DOM节点的attr和property有何区别

1.DOM本质

DOM的基本数据结构是树

DOM可以理解为：

浏览器把拿到的html代码，结构化成一个浏览器能识别并且JS可操作的一个模型而已。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>
<body>
    <div>
        <p>this is p.</p>
    </div>
</body>
</html>

2.获取DOM节点

var div1 = document.getElementById("div1");
var divList = document.getElementsByTagName("div");

console.log(divList.length);
console.log(divList[0]);


var containerList = document.getElementsByClassName(".container");

var pList = document.querySelectorAll("p");

3.property

property只是一个JS对象的属性的修改


//创建一个文档片段
var df = document.createDocumentFragment();
var p = document.createElement("p");
p.className = "hello";
var text = document.createTextNode("文字");
//var p = document.createAttribute("");

df.appendChild(p);
df.appendChild(text);
document.body.appendChild(df);

var pList = document.querySelectorAll("p");
var p = pList[0];

 console.log(p.style.width);//获取样式
 p.style.width = "100px";//修改样式

 console.log(p.className);//获取class
 p.className = "p1";  //设置class


console.log(p.nodeName);//获取节点名字:标签节点：大写的标签名，属性节点：属性名，文本节点：#text
console.log(p.nodeType);//获取节点类型:标签节点：1，属性节点：2，文本节点：3
console.log(p.nodeValue);//获取节点值：标签节点：null，属性节点：属性值，文本节点：文本内容


var nodes = document.body.childNodes;
console.log(nodes);
for(var i = 0;i<nodes.length;i++){
    console.log(nodes[i].nodeName);//获取节点名字
    console.log(nodes[i].nodeType);//获取节点类型
    console.log(nodes[i].nodeValue);//获取节点值
}

4.attirbute

attribute是对html标签属性的修改

var pList = document.querySelectorAll("p");

var p = pList[0];

p.getAttribute("style");
p.setAttribute("style","font-size:30px;");

5.DOM结构的操作

新增节点

//创建节点
var p = document.createElement("p");
//添加节点到父级元素上
document.body.appendChild(p);


//移动已有节点
var p2 = document.getElementById("p2");
var div1 = document.getElementById("div1");

div1.appendChild(p2);

插入节点

//创建节点
var p = document.createElement("p");
p.className = "world";

//添加节点添加到id为custom-bg的节点上
document.body.insertBefore(p,document.getElementById("custom-bg"));

替换节点

//创建节点
var p = document.createElement("p");
p.className = "2019";

//替换掉类名为world的元素
document.body.replaceChild(p,document.getElementsByClassName("world")[0]);

获取父元素

//获取父元素节点
console.log(document.getElementsByClassName("2019")[0].parentNode);
//获取父元素元素
console.log(document.getElementsByClassName("2019")[0].parentElement);

获取子元素

//获取全部的子元素，IE不支持
console.log(document.body.children);
//获取全部的子节点，IE拿到的是全部子元素
console.log(document.body.childNodes);

删除节点

var p = getElementsByClassName("2019")[0];

//根据父元素删除子元素
p.parentNode.removeChild(p);

2.BOM操作

BOM：Browser object model浏览器对象模型

1.如何检测浏览器的类型

var userAgent = navigator.userAgent;

if(userAgent.indexOf("Chrome")>-1){
    console.log("is chrome.");
}

//获取屏幕的宽度
console.log(screen.width);

//获取屏幕的高度
console.log(screen.height);

2.拆解url的各部分

//location

console.log(location.href);

console.log(location.protocol);

console.log(location.host);

console.log(location.hostname);

console.log(location.port);

console.log(location.search);

console.log(location.hash);


//history

history.back();
history.forward();

3.事件绑定

1.编写一个通用的事件监听函数

//绑定事件
function bindEvent(elem,type,fn){
    if("addEventListener" in elem){
        //谷歌、火狐支持
        elem.addEventListener(type,fn,false);
    }else if("attachEvent" in elem){
        elem.attachEvent("on"+type,fn);
    }else{
        elem["on"+type] = fn;
    }
}

//解绑事件
function unBindEvent(elem,type,fn){
    if("removeEventListener" in elem){
        //谷歌、火狐支持
        elem.removeEventListener(type,fn,false);
    }else if("detachEvent" in elem){
        elem.detachEvent("on"+type,fn);
    }else{
        elem["on"+type] = null;
    }
}

2.描述事件冒泡流程

3.代理

代理的好处:

代码简洁

减少浏览器内存占用

4.ajax请求

手动编写一个ajax，不依赖第三方库

IE低版本使用ActiveXOject，和W3C标准不一样

readyState的值：

0 未初始化，还没有调用send方法
1载入，已调用send方法，正在发送请求
2载入完成，send（）方法执行完成，已经接收到全部响应内容
3交互，正在解析响应内容
4完成，响应内容解析完成，可以在客户端调用了

status：

2XX:成功处理请求，如200
3XX:需要重定向，如301永久重定向，302临时重定向
4XX:客户端请求错误，如404
5XX:服务端请求错误，如500

跨域的集中实现方式

跨域：协议+域端口号中的一个不一致就会发生跨域请求

https默认端口号是443

跨域的三个标签:script、img、link

img用于打点统计，统计网站可能是其他域

link、script可以使用CDN，CDN也可以是其他域

script可以用于JSONP

服务端设置http header

5.存储

请描述cookie、sessionStorage、localStorage的区别

cookie

本身用于客户端和服务端通信

但本身有本地存储的功能，于是就被“借用”

使用document.cookie = ""获取和修改即可

缺点：

存储容量太小，只有4kB

所有的http请求都会携带着，会影响获取资源的效率

API简单，需要封装才能使用

sessionStorage和localStorage

HTML5专门未存储而涉及，最大容量5M

API简单易用

localStorage.setItem("key","value");

localStorage.getItem("key");

IOS safari隐藏模式下,localStorage.getItem("key");会报错，建议同意使用try...catch(e){}封装

WWWln1234

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS Web API

JS基础知识：ECMA 262标准JS-Web-API：W3C标准W3C标准中关于JS的规定有：DOM操作、BOM操作、事件绑定、ajax请求（包括http协议）、存储页面弹框是window.alert(123)，浏览器需要做：定义一个window全局变量，对象类型给它定义一个alert属性，属性值是一个函数获取元素document.getElementById(id)，...
复制链接

扫一扫