2018_10_29_02.md 11 KB
代码收集
区分 桌面环境 与 移动平台
参考文章:
https://segmentfault.com/a/1190000016760627
<<< docs/.vuepress/components/js/2018_10_29_01/2018_10_29_01.js
element 元素 Y 轴的 scroll 事件触发
移动平台
<<< docs/.vuepress/components/js/2018_10_29_02/html_scroll_mobil.vue
桌面环境
<<< docs/.vuepress/components/js/2018_10_29_02/html_scroll_pc.vue
节点的操作
一、js 获取子节点的方式
1.通过获取 dom 方式直接获取子节点
其中 test 的父标签 id 的值，div 为标签的名字。getElementsByTagName 是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。
var a = document.getElementById('test').getElementsByTagName('div');
2.通过 childNodes 获取子节点
使用 childNodes 获取子节点的时候，childNodes 返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。
var b = document.getElementById('test').childNodes;
为了不显示不必须的换行的空格，我们如果要使用 childNodes 就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉
//去掉换行的空格
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 来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。
var getFirstChild = document.getElementById('test').children[0];
5.获取第一个子节点
firstChild 来获取第一个子元素，但是在有些情况下我们打印的时候会显示 undefined，这是什么情况呢？？其实 firstChild 和 childNodes 是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和 childNodes 一样处理呀。
var getFirstChild = document.getElementById('test').firstChild;
6.firstElementChild 获取第一个子节点
使用 firstElementChild 来获取第一个子元素的时候，这就没有 firstChild 的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。
var getFirstChild = document.getElementById('test').firstElementChild;
7.获取最后一个子节点
lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的。同样的 lastElementChild 和 firstElementChild 也是一样的。不再赘余。
var getLastChildA = document.getElementById('test').lastChild;
var getLastChildB = document.getElementById('test').lastElementChild;
二、js 获取父节点的方式
1.parentNode 获取父节点
获取的是当前元素的直接父元素。parentNode 是 w3c 的标准。
var p = document.getElementById('test').parentNode;
2.parentElement 获取父节点
parentElement 和 parentNode 一样，只是 parentElement 是 ie 的标准。
var p1 = document.getElementById('test').parentElement;
3.offsetParent 获取所有父节点
一看 offset 我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是 body 下的所有节点信息。
var p2 = document.getElementById('test').offsetParent;
三、js 获取兄弟节点的方式
1.通过获取父亲节点再获取子节点来获取兄弟节点
var brother1 = document.getElementById('test').parentNode.children[1];
2.获取上一个兄弟节点
在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。他们的区别是 previousSibling 会匹配字符，包括换行和空格，而不是节点。previousElementSibling 则直接匹配节点。
var brother2 = document.getElementById('test').previousElementSibling;
var brother3 = document.getElementById('test').previousSibling;
3.获取下一个兄弟节点
同 previousSibling 和 previousElementSibling，nextSibling 和 nextElementSibling 也是类似的。
var brother4 = document.getElementById('test').nextElementSibling;
var brother5 = document.getElementById('test').nextSibling;
作者：-老 K-
来源：CSDN
原文：https://blog.csdn.net/laok_/article/details/75760572
版权声明：本文为博主原创文章，转载请附上博文链接！
原生 Ajax 学习
https://zacklive.com/javascript-dom-ajax/
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
检测并兼容所有浏览器包括 IE7 之流的远古浏览器中是否存在 XHR 对象
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 对象
var xhr = createXHR();
使用
/**
* 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);
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 | 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。 |
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 | 浏览器的用户代理字符串。 |
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);