WebAPI一些小知识点

 

 

---

1.获取特殊元素

获取body元素：let bodyEle = document.body;

获取html元素：let htmlEle = document.documentElement;

2.innerText和innerHTML的区别

innerText不识别html的标签 非标准 去除空格和换行

innerHTML识别html标签 W3C标准 保留空格和换行

3.自定义属性操作

1. 获取元素的属性值  
   1. element.属性
   2. element.getAttribute('属性') //获取自定义属性
2. 设置元素属性值
   1. element.属性= '值'
   2. element.setAttribute('属性', '值');  主要针对于自定义属性
   3. 移除属性 removeAttribute('属性')  

4.节点操作

• 父节点： parentNode   得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
• 子节点：childNodes 所有的子节点 包含 元素节点 文本节点等等      children 获取所有的子元素节点 也是我们实际开发常用的
• .第一个子元素和最后一个子元素

console.log(ol.children[0]);    //开发常用

console.log(ol.children[ol.children.length - 1]);

• nextSibing 下一个兄弟节点 包含元素节点或者文本节点等

           nextElementSibing 得到下一个兄弟元素节点

           previousElementSibling 上一个兄弟元素节点

• 创建和添加节点

           创建：document.createElement（‘’）

           添加：node.appendChild（child）

                      node.insertBefore(childe,指定元素)

• 删除节点 node.removeChild(child)
• 克隆节点

         node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容

      node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容

5.事件对象

• 阻止默认行为：e.preventDeault();

让链接不跳转或提交按钮不提交

• 阻止冒泡：e.stopPropagation()
• e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）     
• 事件委托：事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
• 常见鼠标对象：contextmenu :禁用右键菜单 selectstart : 禁止选中文字           
• 常见键盘对象：

       keyup 按键弹起的时候触发

      keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头

      keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头

      三个事件的执行顺序  keydown -- keypress – keyup

      键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

      keyup 和 keydown事件不区分字母大小写  a 和 A 得到的都是65 keypress 事件 区分字母大小写  a  97 和 A 得到的是65

6.window常见事件

      load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等

      DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

7.定时器

      setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器

      setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

8.获取URL属性 location.search

      <script>

        console.log(location.search); // ?uname=andy

        // 1.先去掉？  substr('起始的位置'，截取几个字符);

        var params = location.search.substr(1); // uname=andy

        console.log(params);

        // 2. 利用=把字符串分割为数组 split('=');

        var arr = params.split('=');

        console.log(arr); // ["uname", "ANDY"]

        var div = document.querySelector('div');

        // 3.把数据写入div中

        div.innerHTML = arr[1] + '欢迎您';

    </script>

9.location常见方法

    location.assign()  记录浏览器历史，可实现后退功能

    location.replace() 不记录浏览器历史，不可实现后退功能

    location.reload(true)  重新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 Boolean，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

10.history对象

      history.go(1) 在浏览器历史记录里前往下一页

      history.go(-1) 在浏览器历史记录里前往上一页

11.offset系列

• 可以得到元素的偏移位置 返回不带单位的数值   console.log(father.offsetTop);  console.log(father.offsetLeft);  它以带有定位的父亲为准  如果没有父亲或者父亲没有定位 则以 body 为准
• 可以得到元素的大小 宽度和高度 包含padding+ border+width。 console.log(w.offsetWidth); console.log(w.offsetHeight);
• 返回带有定位的父亲 否则返回的是body  console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
          console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位