|
@@ -8,13 +8,15 @@
|
|
|
|
|
|
<<< docs/.vuepress/components/js/2018_10_29_01/2018_10_29_01.js
|
|
|
|
|
|
-## 移动平台阻止 element 元素 Y 轴的 scroll 事件触发
|
|
|
+## element 元素 Y 轴的 scroll 事件触发
|
|
|
+
|
|
|
+### 移动平台
|
|
|
|
|
|
<<< docs/.vuepress/components/js/2018_10_29_02/html_scroll_mobil.vue
|
|
|
|
|
|
<!-- <js-2018_10_29_02-html_scroll_mobil/> -->
|
|
|
|
|
|
-## 桌面环境阻止 element 元素 Y 轴的 scroll 事件触发
|
|
|
+### 桌面环境
|
|
|
|
|
|
<<< docs/.vuepress/components/js/2018_10_29_02/html_scroll_pc.vue
|
|
|
|
|
@@ -22,20 +24,278 @@
|
|
|
|
|
|
## 节点的操作
|
|
|
|
|
|
-### Javascript 获取子节点
|
|
|
+[(转载)S 获取子节点、父节点和兄弟节点的若干种方式](https://blog.csdn.net/laok_/article/details/75760572)
|
|
|
+
|
|
|
+### 一、js 获取子节点的方式
|
|
|
+
|
|
|
+#### 1.通过获取 dom 方式直接获取子节点
|
|
|
+
|
|
|
+其中 test 的父标签 id 的值,div 为标签的名字。getElementsByTagName 是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。
|
|
|
+
|
|
|
+```js
|
|
|
+var a = document.getElementById('test').getElementsByTagName('div');
|
|
|
+```
|
|
|
+
|
|
|
+#### 2.通过 childNodes 获取子节点
|
|
|
+
|
|
|
+使用 childNodes 获取子节点的时候,childNodes 返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息。
|
|
|
+
|
|
|
+```js
|
|
|
+var b = document.getElementById('test').childNodes;
|
|
|
+```
|
|
|
+
|
|
|
+为了不显示不必须的换行的空格,我们如果要使用 childNodes 就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉
|
|
|
+
|
|
|
+```js
|
|
|
+//去掉换行的空格
|
|
|
+for (var i = 0; i < b.length; i++) {
|
|
|
+ if (b[i].nodeName == '#text' && !/\s/.test(b.nodeValue)) {
|
|
|
+ document.getElementById('test').removeChild(b[i]);
|
|
|
+ }
|
|
|
+}
|
|
|
+//打印测试
|
|
|
+for (var i = 0; i < b.length; i++) {
|
|
|
+ console.log(i + '---------');
|
|
|
+ console.log(b[i]);
|
|
|
+}
|
|
|
+//补充 document.getElementById("test").childElementCount; 可以直接获取长度 同length
|
|
|
+```
|
|
|
+
|
|
|
+#### 4.通过 children 来获取子节点
|
|
|
+
|
|
|
+利用 children 来获取子元素是最方便的,他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。
|
|
|
+
|
|
|
+```js
|
|
|
+var getFirstChild = document.getElementById('test').children[0];
|
|
|
+```
|
|
|
+
|
|
|
+#### 5.获取第一个子节点
|
|
|
+
|
|
|
+firstChild 来获取第一个子元素,但是在有些情况下我们打印的时候会显示 undefined,这是什么情况呢??其实 firstChild 和 childNodes 是一样的,在浏览器解析的时候会把他当换行和空格一起解析,其实你获取的是第一个子节点,只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和 childNodes 一样处理呀。
|
|
|
+
|
|
|
+```js
|
|
|
+var getFirstChild = document.getElementById('test').firstChild;
|
|
|
+```
|
|
|
+
|
|
|
+#### 6.firstElementChild 获取第一个子节点
|
|
|
|
|
|
-children<br/>
|
|
|
-注意:在 IE 中,children 包含注释节点。
|
|
|
+使用 firstElementChild 来获取第一个子元素的时候,这就没有 firstChild 的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。
|
|
|
|
|
|
-```html
|
|
|
-<div id="wrapper">
|
|
|
- <div>在Javascript中,可以通过 children 来获取所有子节点。</div>
|
|
|
- <div>在Javascript中,可以通过 children 来获取所有子节点。</div>
|
|
|
- <div>在Javascript中,可以通过 children 来获取所有子节点。</div>
|
|
|
- <div>在Javascript中,可以通过 children 来获取所有子节点。</div>
|
|
|
-</div>
|
|
|
+```js
|
|
|
+var getFirstChild = document.getElementById('test').firstElementChild;
|
|
|
```
|
|
|
|
|
|
+#### 7.获取最后一个子节点
|
|
|
+
|
|
|
+lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的。同样的 lastElementChild 和 firstElementChild 也是一样的。不再赘余。
|
|
|
+
|
|
|
```js
|
|
|
-let wrapper = document.getElementById('wrapper').children;
|
|
|
+var getLastChildA = document.getElementById('test').lastChild;
|
|
|
+var getLastChildB = document.getElementById('test').lastElementChild;
|
|
|
```
|
|
|
+
|
|
|
+### 二、js 获取父节点的方式
|
|
|
+
|
|
|
+#### 1.parentNode 获取父节点
|
|
|
+
|
|
|
+获取的是当前元素的直接父元素。parentNode 是 w3c 的标准。
|
|
|
+
|
|
|
+```js
|
|
|
+var p = document.getElementById('test').parentNode;
|
|
|
+```
|
|
|
+
|
|
|
+#### 2.parentElement 获取父节点
|
|
|
+
|
|
|
+parentElement 和 parentNode 一样,只是 parentElement 是 ie 的标准。
|
|
|
+
|
|
|
+```js
|
|
|
+var p1 = document.getElementById('test').parentElement;
|
|
|
+```
|
|
|
+
|
|
|
+#### 3.offsetParent 获取所有父节点
|
|
|
+
|
|
|
+一看 offset 我们就知道是偏移量 其实这个是于位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是 body 下的所有节点信息。
|
|
|
+
|
|
|
+```js
|
|
|
+var p2 = document.getElementById('test').offsetParent;
|
|
|
+```
|
|
|
+
|
|
|
+### 三、js 获取兄弟节点的方式
|
|
|
+
|
|
|
+#### 1.通过获取父亲节点再获取子节点来获取兄弟节点
|
|
|
+
|
|
|
+```js
|
|
|
+var brother1 = document.getElementById('test').parentNode.children[1];
|
|
|
+```
|
|
|
+
|
|
|
+#### 2.获取上一个兄弟节点
|
|
|
+
|
|
|
+在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。他们的区别是 previousSibling 会匹配字符,包括换行和空格,而不是节点。previousElementSibling 则直接匹配节点。
|
|
|
+
|
|
|
+```js
|
|
|
+var brother2 = document.getElementById('test').previousElementSibling;
|
|
|
+var brother3 = document.getElementById('test').previousSibling;
|
|
|
+```
|
|
|
+
|
|
|
+#### 3.获取下一个兄弟节点
|
|
|
+
|
|
|
+同 previousSibling 和 previousElementSibling,nextSibling 和 nextElementSibling 也是类似的。
|
|
|
+
|
|
|
+```js
|
|
|
+var brother4 = document.getElementById('test').nextElementSibling;
|
|
|
+var brother5 = document.getElementById('test').nextSibling;
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+作者:-老 K-<br/>
|
|
|
+来源:CSDN<br/>
|
|
|
+原文:[https://blog.csdn.net/laok\_/article/details/75760572](https://blog.csdn.net/laok_/article/details/75760572)<br/>
|
|
|
+版权声明:本文为博主原创文章,转载请附上博文链接!<br/>
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 原生 Ajax 学习
|
|
|
+
|
|
|
+[https://zacklive.com/javascript-dom-ajax/](https://zacklive.com/javascript-dom-ajax/)<br/>
|
|
|
+AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。<br/>
|
|
|
+
|
|
|
+#### 检测并兼容所有浏览器包括 IE7 之流的远古浏览器中是否存在 XHR 对象
|
|
|
+
|
|
|
+```js
|
|
|
+function createXHR() {
|
|
|
+ if (typeof XMLHttpRequset != 'undefined') {
|
|
|
+ return new XMLHttpRequest();
|
|
|
+ } else if (typeof ActiveXobject != 'undefined') {
|
|
|
+ if (typeof arguments.callee.activeXString != 'string') {
|
|
|
+ var versions = [
|
|
|
+ 'MSXML2.XMLHttp.6.0',
|
|
|
+ 'MSXML2.XMLHttp.3.0',
|
|
|
+ 'MSXML2.XMLHttp',
|
|
|
+ ],
|
|
|
+ i,
|
|
|
+ len;
|
|
|
+ for (i = 0, len = versions.length; i < len; i++) {
|
|
|
+ try {
|
|
|
+ new ActiveXObject(versions[i]);
|
|
|
+ arguments.callee.activeXString = versions[i];
|
|
|
+ break;
|
|
|
+ } catch (ex) {
|
|
|
+ // 跳过
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return new ActiveXObject(arguments.callee.activeXString);
|
|
|
+ } else {
|
|
|
+ throw new Error('No XHR object available');
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+#### 创建 XHR 对象
|
|
|
+
|
|
|
+```js
|
|
|
+var xhr = createXHR();
|
|
|
+```
|
|
|
+
|
|
|
+#### 使用
|
|
|
+
|
|
|
+```js
|
|
|
+/**
|
|
|
+ * xhr对象中的open参数设定
|
|
|
+ * @param {string} method 要使用的HTTP方法,比如「GET」、「POST」、
|
|
|
+ * 「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
|
|
|
+ * @param {string} url 一个DOMString表示要向其发送请求的URL。
|
|
|
+ * @param {Boolean} async 可选;一个可选的布尔参数,默认为true,表示要不要异步执行操作。
|
|
|
+ * 如果值为false,send()方法直到收到答复前不会返回。如果true,
|
|
|
+ * 已完成事务的通知可供事件监听器使用。
|
|
|
+ * 如果multipart属性为true则这个必须为true,否则将引发异常。
|
|
|
+ * @param {String} user 可选.可选的用户名用于认证用途;默认为null。
|
|
|
+ * @param {String} password 可选的密码用于认证用途,默认为null。
|
|
|
+ */
|
|
|
+// 语法
|
|
|
+xhr.open(method, url);
|
|
|
+xhr.open(method, url, async);
|
|
|
+xhr.open(method, url, async, user);
|
|
|
+xhr.open(method, url, async, user, password);
|
|
|
+```
|
|
|
+
|
|
|
+```js
|
|
|
+xhr.open('get', 'example.txt', false);
|
|
|
+xhr.send(null);
|
|
|
+
|
|
|
+if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
|
|
|
+ alert(xhr.responseText);
|
|
|
+} else {
|
|
|
+ alert('Request was unsuccessful: ' + xhr.status);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### readyState
|
|
|
+
|
|
|
+| 状态码 | 说明 |
|
|
|
+| :----: | :--------------------------------------------------------- |
|
|
|
+| 0 | 未初始化.尚未调用 open()方法 |
|
|
|
+| 1 | 启动。已经调用 open()方法,但尚未调用 send()方法。 |
|
|
|
+| 2 | 发送。已经调用 send()方法,但尚未接收到响应。 |
|
|
|
+| 3 | 接收。已经接收到部分响应数据。 |
|
|
|
+| 4 | 完成。已经接收到全部响应数据,而且已经可以在客户端使用了。 |
|
|
|
+
|
|
|
+```js
|
|
|
+var xhr = createXHR();
|
|
|
+xhr.onreadystatechange = function() {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
|
|
|
+ alert(xhr.responseText);
|
|
|
+ } else {
|
|
|
+ alert('Request was unsuccessful: ' + xhr.status);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+xhr.open('get', 'example.txt', true);
|
|
|
+xhr.send(null);
|
|
|
+```
|
|
|
+
|
|
|
+### HTTP 头部信息
|
|
|
+
|
|
|
+- 可使用`setRequestHeader()`方法可以设置自定义的请求头部信息
|
|
|
+
|
|
|
+| 参数 | 说明 |
|
|
|
+| :-------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
+| Accept | 浏览器能够处理的内容类型。 |
|
|
|
+| Accept-Charset | 浏览器能够显示的字符集。 |
|
|
|
+| Accept-Encoding | 浏览器能够处理的压缩编码。 |
|
|
|
+| Accept-Language | 浏览器当前设置的语言。 |
|
|
|
+| Connection | 浏览器与服务器之间连接的类型。 |
|
|
|
+| Cookie | 当前页面设置的任何 Cookie。 |
|
|
|
+| Host | 发出请求的页面所在的域 。 |
|
|
|
+| Referer | 发出请求的页面的 URI。注意,HTTP 规范将这个头部字段拼写错了,而为保证与规范一致,也只能将错就错了。(这个英文单词的正确拼法应该是 referrer。) |
|
|
|
+| User-Agent | 浏览器的用户代理字符串。 |
|
|
|
+
|
|
|
+```js
|
|
|
+var xhr = createXHR();
|
|
|
+xhr.onreadystatechange = function() {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
|
|
|
+ alert(xhr.responseText);
|
|
|
+ } else {
|
|
|
+ alert('Request was unsuccessful: ' + xhr.status);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+xhr.open('get', 'example.php', true);
|
|
|
+xhr.setRequestHeader('MyHeader', 'MyValue');
|
|
|
+xhr.send(null);
|
|
|
+```
|
|
|
+
|
|
|
+### es5 示例代码
|
|
|
+
|
|
|
+#### 跨域
|
|
|
+
|
|
|
+#### 异常处理
|
|
|
+
|
|
|
+### es6 示例代码
|
|
|
+
|
|
|
+#### 跨域
|
|
|
+
|
|
|
+#### promise 调用
|