js知识总结（选自DOM艺术）_e.nodetype-优快云博客

本文链接：https://blog.youkuaiyun.com/happygirl0917/article/details/107356317

1.js的数据类型(8种)：
string number boolean null undefined object symbol bigInt

string 中转义字符：例子： var s="i don\'t care";

object中包含array function data

bigInt是增大了number的范围（安全存储增大范围）

symbol 是es6中新加的唯一性

2.作用域

全局作用域部分作用域块作用域（let const）

3.dom（document object model）

object：即对象 js对象包括用户自定义对象（var h=...）、内建对象（Array Date Math）、宿主对象（window对象主要考虑document对象）

4.dom中的节点（元素节点文本节点属性节点）

4.1 元素节点： p div body ...

4.2 文本节点：就是文本

4.3 属性节点：<p title=“...”></p> title就是一个属性节点 id class

5 获取dom节点方法

5.1 获取元素

5.1.1getElementById() 返回的是对象

5.1.2getElemnetByTagName() 返回的是数组

例子： document.getElemnetByTagName(“*”) 得到的是所有元素节点用.length可以获得个数

Var li=document.getElementById(“li”)

Var l=li.getElementByTagName(“*”).length

以上获得li中个数

5.1.3 getElementClassName() h5中新加入的特性返回是数组

5.2 获取属性

5.2.1 getAttribute() 不属于document 应该用节点元素.getAttribute()

5.2.2 setAttribute(key,value) 他没有改变原代码先加载静态在刷新动态不影响静态

6 事件处理函数

特定事件中调用特定的js代码

例子：鼠标悬停 onmouseover 鼠标离开 onmouseout

语法： event= “Js statement(s)” 语句要放在双引号中

例子： οnclick=”showImg(this) return false” 后面的意思是指拒绝默认行为

7 dom方法

7.1 childNodes属性 e.childNodes 获取该元素的所有子元素返回的是数组

7.2 nodeType属性 e.nodeType 获取XX节点

1 -----> 元素节点 2-------> 文本节点 3-------->属性节点

7.3 nodeValue属性获取文本节点的内容

注: 不可以用document.getElementById(“p”).nodeValue 返回的是null

要用 document.getElementById(“p”)[0].nodeValue

可以获取也通过该方法设置

7.4 firstChild lastChild 属性

8.最佳实践

8.1 js平稳退化（当用户禁止使用js时满足用户需求）

例子：点击打开一个新的连接

打开一个新的浏览窗口 window.open(url,name,features)

增加性能：

减少多个引入文件
压缩文件减少空格注释可以分成两个文本工作和副本（XX.min.js）

window.load=function(){
a();b();

}

动态创建标记

10.1传统方法

10.1.1 document.write() 里面可以是html语言在页面中显示

10.1.2 innnerHTML 读写html内容 p.innnerHTML---><p>text</p>

10.2创建新元素

10.2.1 createElement() 创建元素节点

a=document.createElment(“p”)

10.2.2 appendChild() 插入 parent.appendChild(a)

10.2.3 createTextNode() 创建文本节点

a.apppendChild(document.createTextNode(“text”))

10.2.4 InsertBefore()

父元素：a.parentNode

目标元素的父元素.insertBefore(新元素，目标元素)

10.2.5 insertAfter()没有该函数需要自己建立 jquery可以直接用

function insertAfter(newE, target) {

var parent = target.parentNode;

if(parent.lastChild==target){

parent.appendChild(newE);

}else{

//如果不是插入到目标元素与其兄弟元素之间

parent.insertBefore(newE,target.nextSibling)

}

11.Ajax

XMLHttpRequset对象

创建XMLHttpRequest

分成老版本新版本

var xmlhttp;

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

请求：

Xmlhttp.open(“GET/POST”,url,true/false) true---->异步

Xmlhttp.send()

Send(string)仅用于post请求

xmlhttp.open("GET","url",true);

xmlhttp.send()

xmlhttp.open("POST","url",true)

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加请求头

xmlhttp.send("fname=Bill&lname=Gates");

服务器响应：

responseText(字符串) responseXML

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面