重新整理JavaScript笔记

JavaScript/13Dom.md

@@ -1,18 +0,0 @@
-# Dom 相关的常用的操作
-
-需要知道哪里可以查询到这些东西
-
-
-## 1 基础操作
-
-### 五种节点类型
-
-
-* 文档是一个文档节点。
-* 所有的HTML元素都是元素节点。
-* 所有 HTML 属性都是属性节点。
-* 文本插入到 HTML 元素是文本节点。are text nodes。
-* 注释是注释节点。
-
-
-### 创建操作

JavaScript/Ajax/1 ajax.md

@@ -12,7 +12,11 @@ AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览
 ### 原理 
 异步的JavaScript和XML。创建快速动态网页技术。在后台与服务器进行少量的数据交换，实现网页的异步更新。
 
-
 * 使用JS创建XMLHTTPRequest对象，发送HTTPRequest内容。
 * 使用JS处理被返回的数据，更新页面内容。
 
+
+
+### ajax的多种实现方式
+
+![1705132223204](image/1705132223204.png)

JavaScript/Ajax/2 xhr.md

@@ -61,4 +61,4 @@ xmlhttp.onreadystatechange=function()
         document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
 }
-```
+```

JavaScript/Ajax/3 axios.md

@@ -0,0 +1,387 @@
+## 1 是什么
+
+Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
+
+参考文件：javaguide.cn/java/concurrent/aqs.html#aqs-介绍
+
+## 2 怎么用
+
+
+### 安装
+使用 npm:
+```
+$ npm install axios
+```
+
+使用 bower:
+```
+$ bower install axios
+```
+使用 cdn:
+```
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+```
+
+### 执行 GET 请求
+```js
+// 为给定 ID 的 user 创建请求
+axios.get('/user?ID=12345')
+  .then(function (response) {
+    console.log(response);
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+
+// 上面的请求也可以这样做
+axios.get('/user', {
+    params: {
+      ID: 12345
+    }
+  })
+  .then(function (response) {
+    console.log(response);
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+```
+
+### 执行 POST 请求
+```js
+axios.post('/user', {
+    firstName: 'Fred',
+    lastName: 'Flintstone'
+  })
+  .then(function (response) {
+    console.log(response);
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+```
+
+### 执行多个并发请求
+
+```js
+function getUserAccount() {
+  return axios.get('/user/12345');
+}
+
+function getUserPermissions() {
+  return axios.get('/user/12345/permissions');
+}
+
+axios.all([getUserAccount(), getUserPermissions()])
+  .then(axios.spread(function (acct, perms) {
+    // 两个请求现在都执行完成
+  }));
+```
+
+### 添加配置
+```
+可以通过向 axios 传递相关配置来创建请求
+
+axios(config)
+// 发送 POST 请求
+axios({
+  method: 'post',
+  url: '/user/12345',
+  data: {
+    firstName: 'Fred',
+    lastName: 'Flintstone'
+  }
+});
+// 获取远端图片
+axios({
+  method:'get',
+  url:'http://bit.ly/2mTM3nY',
+  responseType:'stream'
+})
+  .then(function(response) {
+  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
+});
+```
+
+
+## 2 配置内容
+
+### 请求配置
+
+```js
+{
+   // `url` 是用于请求的服务器 URL
+  url: '/user',
+
+  // `method` 是创建请求时使用的方法
+  method: 'get', // default
+
+  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
+  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
+  baseURL: 'https://some-domain.com/api/',
+
+  // `transformRequest` 允许在向服务器发送前，修改请求数据
+  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
+  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
+  transformRequest: [function (data, headers) {
+    // 对 data 进行任意转换处理
+    return data;
+  }],
+
+  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
+  transformResponse: [function (data) {
+    // 对 data 进行任意转换处理
+    return data;
+  }],
+
+  // `headers` 是即将被发送的自定义请求头
+  headers: {'X-Requested-With': 'XMLHttpRequest'},
+
+  // `params` 是即将与请求一起发送的 URL 参数
+  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
+  params: {
+    ID: 12345
+  },
+
+   // `paramsSerializer` 是一个负责 `params` 序列化的函数
+  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
+  paramsSerializer: function(params) {
+    return Qs.stringify(params, {arrayFormat: 'brackets'})
+  },
+
+  // `data` 是作为请求主体被发送的数据
+  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
+  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
+  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
+  // - 浏览器专属：FormData, File, Blob
+  // - Node 专属： Stream
+  data: {
+    firstName: 'Fred'
+  },
+
+  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
+  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
+  timeout: 1000,
+
+   // `withCredentials` 表示跨域请求时是否需要使用凭证
+  withCredentials: false, // default
+
+  // `adapter` 允许自定义处理请求，以使测试更轻松
+  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
+  adapter: function (config) {
+    /* ... */
+  },
+
+ // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
+  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
+  auth: {
+    username: 'janedoe',
+    password: 's00pers3cret'
+  },
+
+   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
+  responseType: 'json', // default
+
+  // `responseEncoding` indicates encoding to use for decoding responses
+  // Note: Ignored for `responseType` of 'stream' or client-side requests
+  responseEncoding: 'utf8', // default
+
+   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
+  xsrfCookieName: 'XSRF-TOKEN', // default
+
+  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
+  xsrfHeaderName: 'X-XSRF-TOKEN', // default
+
+   // `onUploadProgress` 允许为上传处理进度事件
+  onUploadProgress: function (progressEvent) {
+    // Do whatever you want with the native progress event
+  },
+
+  // `onDownloadProgress` 允许为下载处理进度事件
+  onDownloadProgress: function (progressEvent) {
+    // 对原生进度事件的处理
+  },
+
+   // `maxContentLength` 定义允许的响应内容的最大尺寸
+  maxContentLength: 2000,
+
+  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
+  validateStatus: function (status) {
+    return status >= 200 && status < 300; // default
+  },
+
+  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
+  // 如果设置为0，将不会 follow 任何重定向
+  maxRedirects: 5, // default
+
+  // `socketPath` defines a UNIX Socket to be used in node.js.
+  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
+  // Only either `socketPath` or `proxy` can be specified.
+  // If both are specified, `socketPath` is used.
+  socketPath: null, // default
+
+  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
+  // `keepAlive` 默认没有启用
+  httpAgent: new http.Agent({ keepAlive: true }),
+  httpsAgent: new https.Agent({ keepAlive: true }),
+
+  // 'proxy' 定义代理服务器的主机名称和端口
+  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
+  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
+  proxy: {
+    host: '127.0.0.1',
+    port: 9000,
+    auth: {
+      username: 'mikeymike',
+      password: 'rapunz3l'
+    }
+  },
+
+  // `cancelToken` 指定用于取消请求的 cancel token
+  // （查看后面的 Cancellation 这节了解更多）
+  cancelToken: new CancelToken(function (cancel) {
+  })
+}
+```
+
+
+### 响应结构
+
+
+某个请求的响应包含以下信息
+```js
+
+{
+  // `data` 由服务器提供的响应
+  data: {},
+
+  // `status` 来自服务器响应的 HTTP 状态码
+  status: 200,
+
+  // `statusText` 来自服务器响应的 HTTP 状态信息
+  statusText: 'OK',
+
+  // `headers` 服务器响应的头
+  headers: {},
+
+   // `config` 是为请求提供的配置信息
+  config: {},
+ // 'request'
+  // `request` is the request that generated this response
+  // It is the last ClientRequest instance in node.js (in redirects)
+  // and an XMLHttpRequest instance the browser
+  request: {}
+}
+
+
+
+axios.get('/user/12345')
+  .then(function(response) {
+    console.log(response.data);
+    console.log(response.status);
+    console.log(response.statusText);
+    console.log(response.headers);
+    console.log(response.config);
+  });
+```
+
+
+## 3 特殊处理
+
+### 全局的 axios 默认值
+```js
+axios.defaults.baseURL = 'https://api.example.com';
+axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+```
+
+### 自定义实例默认值
+
+```js
+// Set config defaults when creating the instance
+const instance = axios.create({
+  baseURL: 'https://api.example.com'
+});
+
+// Alter defaults after instance has been created
+instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+```
+### 配置的优先顺序
+
+配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：
+
+```
+// 使用由库提供的配置的默认值来创建实例
+// 此时超时配置的默认值是 `0`
+var instance = axios.create();
+
+// 覆写库的超时默认值
+// 现在，在超时前，所有请求都会等待 2.5 秒
+instance.defaults.timeout = 2500;
+
+// 为已知需要花费很长时间的请求覆写超时设置
+instance.get('/longRequest', {
+  timeout: 5000
+});
+```
+### 拦截器
+在请求或响应被 then 或 catch 处理前拦截它们。
+```js
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  }, function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  });
+
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+    // 对响应数据做点什么
+    return response;
+  }, function (error) {
+    // 对响应错误做点什么
+    return Promise.reject(error);
+  });
+```
+如果你想在稍后移除拦截器，可以这样：
+```
+const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
+axios.interceptors.request.eject(myInterceptor);
+```
+可以为自定义 axios 实例添加拦截器
+```
+const instance = axios.create();
+instance.interceptors.request.use(function () {/*...*/});
+```
+### 错误处理
+```js
+axios.get('/user/12345')
+  .catch(function (error) {
+    if (error.response) {
+      // The request was made and the server responded with a status code
+      // that falls out of the range of 2xx
+      console.log(error.response.data);
+      console.log(error.response.status);
+      console.log(error.response.headers);
+    } else if (error.request) {
+      // The request was made but no response was received
+      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+      // http.ClientRequest in node.js
+      console.log(error.request);
+    } else {
+      // Something happened in setting up the request that triggered an Error
+      console.log('Error', error.message);
+    }
+    console.log(error.config);
+  });
+```
+可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。
+```js
+axios.get('/user/12345', {
+  validateStatus: function (status) {
+    return status < 500; // Reject only if the status code is greater than or equal to 500
+  }
+})
+```

JavaScript/Ajax/4 fetch.md

@@ -0,0 +1,55 @@
+## 1 简介
+
+参考文件：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
+
+## 2 使用
+### 基本用法
+
+```js
+// Example POST method implementation:
+async function postData(url = "", data = {}) {
+  // Default options are marked with *
+  const response = await fetch(url, {
+    method: "POST", // *GET, POST, PUT, DELETE, etc.
+    mode: "cors", // no-cors, *cors, same-origin
+    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: "same-origin", // include, *same-origin, omit
+    headers: {
+      "Content-Type": "application/json",
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: "follow", // manual, *follow, error
+    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    body: JSON.stringify(data), // body data type must match "Content-Type" header
+  });
+  return response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData("https://example.com/answer", { answer: 42 }).then((data) => {
+  console.log(data); // JSON data parsed by `data.json()` call
+});
+
+```
+
+
+### 上传文件
+
+```js
+const formData = new FormData();
+const fileField = document.querySelector('input[type="file"]');
+
+formData.append("username", "abc123");
+formData.append("avatar", fileField.files[0]);
+
+fetch("https://example.com/profile/avatar", {
+  method: "PUT",
+  body: formData,
+})
+  .then((response) => response.json())
+  .then((result) => {
+    console.log("Success:", result);
+  })
+  .catch((error) => {
+    console.error("Error:", error);
+  });
+```

JavaScript/Ajax/5 jquery.md

@@ -0,0 +1,74 @@
+## 1 load
+
+### load方法
+jQuery load() 方法是简单但强大的 AJAX 方法。
+
+load() 方法从服务器加载数据，并把返回的数据放入被选元素中
+
+```
+$(selector).load(URL,data,callback);
+
+$("#div1").load("demo_test.txt");
+```
+
+### load回调参数
+
+可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
+
+responseTxt - 包含调用成功时的结果内容
+statusTXT - 包含调用的状态
+xhr - 包含 XMLHttpRequest 对象
+
+```
+$("button").click(function(){
+  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
+    if(statusTxt=="success")
+      alert("外部内容加载成功!");
+    if(statusTxt=="error")
+      alert("Error: "+xhr.status+": "+xhr.statusText);
+  });
+});
+```
+
+## 2 GET方法
+GET - 从指定的资源请求数据.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
+```
+$.get(URL,callback);
+
+$("button").click(function(){
+  $.get("demo_test.php",function(data,status){
+    alert("数据: " + data + "\n状态: " + status);
+  });
+});
+```
+## 3 POST方法
+
+POST - 向指定的资源提交要处理的数据.POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据
+
+```
+$.post(URL,data,callback);
+
+$("button").click(function(){
+    $.post("/try/ajax/demo_test_post.php",
+    {
+        name:"菜鸟教程",
+        url:"http://www.runoob.com"
+    },
+    function(data,status){
+        alert("数据: \n" + data + "\n状态: " + status);
+    });
+});
+```
+
+
+## 2 GET JSON方法
+GET - 从指定的资源请求数据.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
+```
+$.getJSON(URL,callback);
+
+$("button").click(function(){
+  $.get("demo_test.php",function(data,status){
+    alert("数据: " + data + "\n状态: " + status);
+  });
+});
+```

JavaScript/JavaScript/13 Dom.md

@@ -0,0 +1,214 @@
+# Dom 相关的常用的操作
+
+## 1 基础操作
+
+### 五种节点类型
+
+* 文档是一个文档节点。
+* 所有的HTML元素都是元素节点。
+* 所有 HTML 属性都是属性节点。
+* 文本插入到 HTML 元素是文本节点。are text nodes。
+* 注释是注释节点。
+
+### DOM的组成
+
+- 核心 DOM - 针对任何结构化文档的标准模型
+- XML DOM - 针对 XML 文档的标准模型
+- HTML DOM - 针对 HTML 文档的标准模型
+
+### 节点关系
+
+- 在节点树中，顶端点被称为根
+- 每个节点都有父节点
+- 一个节点可拥有任意数量的子节点
+- 同胞是拥有相同父节点的结点
+
+### 节点操作
+
+可以通过JS等脚本语言对HTML_DOM进行访问
+
+所有的HTML元素都被定义为对象，而编程接口则是对象的方法和对象的属性
+
+方法是能够执行的动作（添加或修改元素节点）
+
+属性是能够获取或设置的值（节点的名称或内容）
+
+## 2 文档节点
+
+### document object
+
+model：文档对象模型，将HTML文档呈现为带有元素、属性和文本的树结构，成为节点树。三种DOM结点;
+
+* 元素节点：`<html\>\<body\>\<p\>(tag)`
+* 文本节点：````<li></li>```````<script><css>```
+* 属性节点：元素属性 `<a href = "http://">`其中href即为元素的属性
+
+![713150815405.png](media/41b23d86a383cc654da42e8957b33725.png)
+
+![724101446557.png](media/75813153285d5ceb04c812e98c3b33a1.png)
+
+#### 节点属性
+
+* nodeName：
+
+  * 元素节点的 nodeName 与标签名相同
+  * 属性节点的 nodeName 是属性的名称
+  * 文本节点的 nodeName 永远是#text
+  * 文档节点的 nodeName 永远是#document
+* nodeType：
+
+  * 节点类型1-\>元素节点；
+  * 2-\>属性节点；
+  * 3-\>文本节点
+* nodeValue：节点值，元素节点返回null，属性节点返回属性值，文本节点返回文本内容
+
+  * 元素节点的 nodeValue 是 undefined 或 null
+  * 文本节点的 nodeValue 是文本自身
+  * 属性节点的 nodeValue 是属性的值
+* childNodes：返回子节点数组（只有元素节点有子节点）
+* firstChild：返回第一个子节点
+* lastChild：返回最后一个子节点
+* nextSibling：返回下一个兄弟节点
+* previousSibling：返回节点的上一个兄弟节点
+* parentNode：返回节点的父节点。
+
+### 节点方法
+
+document对象的节点方法
+
+* write()：写入内容到文档
+* getElementBYId()：返回指定ID的元素
+* getElementsByTagName()：返回带有制定标签名的所有元素（是一个数组）
+* get/setAttribute('key', 'value')：返回设置属性节点
+
+其他元素的结点方法：
+
+| 节点方法                         | 说明                           |
+| -------------------------------- | ------------------------------ |
+| createElenment('tafName')        | 创建元素节点                   |
+| createTextNode(‘text’)         | 创建文本节点                   |
+| appendChild(o)                   | 在父节点末尾附加子节点         |
+| reateDocumentFragment()          | 创建文档片段                   |
+| removeChild(oP)                  | 删除节点                       |
+| replaceChild(newOp,targetOp)     | 替换节点                       |
+| insertBefore(newOp,targerOp)     | 已有的子节点前插入一个新的节点 |
+| insertAfter(newOp,targetOp)      | 已有的子节点后插入一个新的节点 |
+| get/setAttribute('key', 'value') | 设置或得到属性节点             |
+| clonNode(true/false)             | 复制节点                       |
+
+元素内容
+
+* innerHTML（替换时包括其中的html标签）
+* innerText（替换时只有其中的文本内容）
+
+元素样式
+
+方法：
+
+* style属性，能够创建新的属性并赋值
+* className属性，只能改变标签的类属性，使用已经有的类来改变标签的属性
+
+语法：
+
+* object.style.property = new style;
+* object.style.className = "class"
+
+## 3 页面设置
+
+### 页面尺寸
+
+宽高尺寸
+
+* clientWidth / clientHeight窗口的宽度高度
+* scrollWidth / scrollHeight文档内容的高度宽度
+* offsetWidth / offsetHeight文档内容的高度宽度
+
+坐标位置
+
+* scrollleft / scrollTop滚轴的水平便宜距离，垂直偏移距离
+* offsetLeft / offsetTop对象与页面的边距
+* event.clientX / event.clientY事件触发时，鼠标指针对窗口的水平垂直坐标(event为时间)
+
+> 注意事项：documentElement是整个节点树的根节点root，即html标签，document.body也是document能直接调用的属性标签
+
+语法：
+
+* object.offsetLeft/oobject.offsetTop
+
+## 4 节点遍历
+
+
+### 父子节点
+
+childNode
+
+* 使用语法：elementNode.childNodes
+
+> 注意事项：空白节点会被浏览器但顾总文本节点
+
+firstChild lastChild
+
+* 使用语法：node.firstChild node.lastChild
+
+parentNode
+
+* 使用语法:elementNode.parentNode
+
+## 5 节点操作
+
+### 主要方法
+
+| 方法                     | 描述                                                            |
+| ------------------------ | --------------------------------------------------------------- |
+| getElementById()         | 返回带有指定 ID 的元素。                                        |
+| getElementsByTagName()   | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
+| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。                      |
+| appendChild()            | 把新的子节点添加到指定节点。                                    |
+| removeChild()            | 删除子节点。                                                    |
+| replaceChild()           | 替换子节点。                                                    |
+| insertBefore()           | 在指定的子节点前面插入新的子节点。                              |
+| createAttribute()        | 创建属性节点。                                                  |
+| createElement()          | 创建元素节点。                                                  |
+| createTextNode()         | 创建文本节点。                                                  |
+| getAttribute()           | 返回指定的属性值。                                              |
+| setAttribute()           | 把指定属性设置或修改为指定的值。                                |
+
+属性：
+
+innerHTML //元素节点的文本值
+
+parentNode//元素节点的父节点
+
+childNodes//元素节点的子节点
+
+atrributes//元素节点的属性节点
+
+nodeName属性规定节点的名称（只读）
+
+nodeValue规定节点的值
+
+### nodeType属性返回节点的类型
+
+| 元素类型 | NodeType |
+| -------- | -------- |
+| 元素     | 1        |
+| 属性     | 2        |
+| 文本     | 3        |
+| 注释     | 8        |
+| 文档     | 9        |
+
+> 在这里，将html中的各个部分解析成节点的概念，有助于通过结点树建立节点关系模型，非常好，而且简单。然后，有将html中各个部分，定义成对象，并且定义了对象的属性和方法，能够很轻松的完成对元素的访问和操作。提到对象，联系C++中的知识，可以知道，对象，主要包括数据成员和成员函数，前者就是对象的属性，后者是对象的方法。然后再说一下这里的DOM的理解，文档对象模型。简单的说，就是讲整个html文档中的所有元素，定义成节点和对象的过程并且通过这种定义，简化并且系统的表达了对html的访问和操作。
+
+### DOM中相关的事件
+
+.onclick=function(){displayDate()};
+
+onclick="displayDate()"
+
+onload="checkCookies()"
+
+onchange="upperCase()"
+
+onmouseover onmouseout
+
+onmousedown onmouseup

JavaScript/教程/DOM对象.md

@@ -1,196 +0,0 @@
-\>简介
-
-\>\>document object
-model：文档对象模型，将HTML文档呈现为带有元素、属性和文本的树结构，成为节点树
-
-\>\>三种DOM结点;
-
->   元素节点：\<html\>\<body\>\<p\>(tag)
-
->   文本节点：\<li\>\</li\>\<script\>\<css\>
-
->   属性节点：元素属性\<a href = "http://"\>其中href即为元素的属性
-
-![713150815405.png](media/41b23d86a383cc654da42e8957b33725.png)
-
-\>\>节点属性：
-
->   nodeName：
-
->   1\. 元素节点的 nodeName 与标签名相同
-
->   2\. 属性节点的 nodeName 是属性的名称
-
->   3\. 文本节点的 nodeName 永远是\#text
-
->   4\. 文档节点的 nodeName 永远是\>\#document
-
->   nodeType：节点类型1-\>元素节点；2-\>属性节点；3-\>文本节点
-
->   nodeValue：节点值，元素节点返回null，属性节点返回属性值，文本节点返回文本内容
-
->   1\. 元素节点的 nodeValue 是 undefined 或 null
-
->   2\. 文本节点的 nodeValue 是文本自身
-
->   3\. 属性节点的 nodeValue 是属性的值
-
->   childNodes：返回子节点数组（只有元素节点有子节点）
-
->   firstChild：返回第一个子节点
-
->   lastChild：返回最后一个子节点
-
->   nextSibling：返回下一个兄弟节点
-
->   previousSibling：返回节点的上一个兄弟节点
-
->   parentNode：返回节点的父节点。
-
-\>\>节点方法（是document对象的节点方法）
-
->   write()：写入内容到文档
-
->   getElementBYId()：返回指定ID的元素
-
->   getElementsByTagName()：返回带有制定标签名的所有元素（是一个数组）
-
->   get/setAttribute('key', 'value')：返回设置属性节点
-
-\>\>其他元素的结点方法：
-
-| 节点方法                         | 说明                           |
-|----------------------------------|--------------------------------|
-| createElenment('tafName')        | 创建元素节点                   |
-| createTextNode(‘text’)           | 创建文本节点                   |
-| appendChild(o)                   | 在父节点末尾附加子节点         |
-| reateDocumentFragment()          | 创建文档片段                   |
-| removeChild(oP)                  | 删除节点                       |
-| replaceChild(newOp,targetOp)     | 替换节点                       |
-| insertBefore(newOp,targerOp)     | 已有的子节点前插入一个新的节点 |
-| insertAfter(newOp,targetOp)      | 已有的子节点后插入一个新的节点 |
-| get/setAttribute('key', 'value') | 设置或得到属性节点             |
-| clonNode(true/false)             | 复制节点                       |
-
-\>元素内容
-
->   innerHTML（替换时包括其中的html标签）
-
->   innerText（替换时只有其中的文本内容）
-
->   修改p标签的这两个值会得到不同的结果
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
-[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<p\>**JavaScript**\</p\>**
-
-3.  **\<p\>**JavaScript**\</p\>**
-
-4.  **\<input** type="button" id="inp" value="click"**\>**
-
-5.  **\<script** type="text/javascript"**\>**
-
-6.  var inp = document.getElementById('inp');
-
-7.  inp.onclick = function(){
-
-8.  var ip = document.getElementsByTagName('p');
-
-9.  alert(ip[0].innerHTML);
-
-10. ip[0].innerHTML = "\<i\>hello\</i\>";
-
-11. ip[1].innerText = "\<i\>hello\</i\>";
-
-12. }
-
-13. **\</script\>**
-
-14. **\</body\>\</span\>**
-
-![713160404053.png](media/a287b11ce3f0470882a238120c33a6bb.png)
-
-![713160410069.png](media/04d4031de63e53c5addd72792a6b60bd.png)
-
-\>元素样式
-
->   方法：
-
->   style属性，能够创建新的属性并赋值
-
->   className属性，只能改变标签的类属性，使用已经有的类来改变标签的属性
-
->   语法：
-
->   object.style.property = new style;
-
->   object.style.className = "class"
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
-[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<h2** id="ih"**\>**JavaScript**\</h2\>**
-
-3.  **\<input** type="button" id="inp" value="click"**\>**
-
-4.  **\<script** type="text/javascript"**\>**
-
-5.  var inp = document.getElementById("inp");
-
-6.  inp.onclick = function () {
-
-7.  var oh = document.getElementById("ih");
-
-8.  oh.style.color = "red";
-
-9.  oh.style.width = "300px";
-
-10. oh.style.backgroundColor = "\#CCC";
-
-11. }
-
-12. **\</script\>**
-
-13. **\</body\>\</span\>**
-
-\>显示和隐藏
-
->   display = none 或者block
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
-[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
-
-1.  **\<span** style="font-size:14px;"**\>\<body\>**
-
-2.  **\<p** id="ip"**\>**你可以把我隐藏，也可以让我显示哦\~**\</p\>**
-
-3.  **\<input** type="button" id="ihide" value="hide"**\>**
-
-4.  **\<input** type="button" id="ishow" value="show"**\>**
-
-5.  **\<script** type="text/javascript"**\>**
-
-6.  var op = document.getElementById("ip");
-
-7.  var inp = document.getElementsByTagName("input");
-
-8.  inp[0].onclick = function () {
-
-9.  op.style.display = "none";
-
-10. }
-
-11. inp[1].onclick = function () {
-
-12. op.style.display = 'block';
-
-13. }
-
-14. **\</script\>**
-
-15. **\</body\>\</span\>**

JavaScript/教程/DOM对象三.md

@@ -1,99 +0,0 @@
-\>页面尺寸
-
-\>\>宽高尺寸
-
->   clientWidth / clientHeight窗口的宽度高度
-
->   scrollWidth / scrollHeight文档内容的高度宽度
-
->   offsetWidth / offsetHeight文档内容的高度宽度
-
-\>\>坐标位置
-
->   scrollleft / scrollTop滚轴的水平便宜距离，垂直偏移距离
-
->   offsetLeft / offsetTop对象与页面的边距
-
->   event.clientX /
->   event.clientY事件触发时，鼠标指针对窗口的水平垂直坐标(event为时间)
-
-//注意事项：documentElement是整个节点树的根节点root，即html标签，document.body也是document能直接调用的属性标签
-
-语法：
-
->   object.offsetLeft/oobject.offsetTop
-
-\>拖拽功能的实现
-
-**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51900581)
-[copy](http://blog.csdn.net/estom_yin/article/details/51900581)
-
-1.  **\<html\>**
-
-2.  **\<head\>**
-
-3.  **\<meta** charset="UTF-8"**\>**
-
-4.  **\<title\>**event**\</title\>**
-
-5.  **\<style\>**
-
-6.  \#box {
-
-7.  width: 100px;
-
-8.  height: 100px;
-
-9.  background-color: aquamarine;
-
-10. position: absolute;
-
-11. }
-
-12. **\</style\>**
-
-13. **\</head\>**
-
-14. **\<body\>**
-
-15. **\<div** id="box"**\>\</div\>**
-
-16. **\<script** type="text/javascript"**\>**
-
-17. var oDiv = document.getElementById("box");
-
-18. oDiv.onmousedown = function(ev){
-
-19. var oEvent = ev;
-
-20. var disX = oEvent.clientX-oDiv.offsetLeft;
-
-21. var disY = oEvent.clientY-oDiv.offsetTop;
-
-22. document.onmousemove = function(ev){
-
-23. oEvent = ev;
-
-24. oDiv.style.left = oEvent.clientX - disX +"px";
-
-25. oDiv.style.top = oEvent.clientY - disY +"px";
-
-26. }
-
-27. document.onmouseup = function(){
-
-28. document.onmousemove = null;
-
-29. document.onmouseup = null;
-
-30. }
-
-31. }
-
-32. 
-
-33. **\</script\>**
-
-34. **\</body\>**
-
-35. **\</html\>**