每天10个前端知识点：js组成篇

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

---

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

---

1. js的组成部分

ECMA

ECMAScript(js核心)

*兼容：完全兼容
eg:
if(){}
arr.pop();

DOM

Document Object Model 文档对象模型

*兼容：大部分兼容，不兼容可以作兼容处理
eg:
document.getElementById('id')
oDiv.style.background = 'red';

BOM

Browser Object Model 浏览器对象模型

*兼容：根据使用浏览器来，根本不兼容，且不能作兼容处理
eg:
window.navigator.userAgent
alert();

2. DOM节点关系

1. 父子节点

   • 子节点：父节点.children; (一级，一层)

   • 父节点：子节点.parentNode;

2. 兄弟节点

   • 上一个兄弟节点：
     obj.perviousElementSibling;
     *兼容：高级浏览器
     obj.previousSibling
     *兼容：全兼容
     高级浏览器 -> object text
     低级浏览器 -> 能获取相应的节点

   兼容写法

   var oPrev = obj.previousElementSibling || obj.previousSibling;

   • 下一个兄弟节点
     obj.nextElementSibling
     *兼容：高级浏览器
     obj.nextSibling
     *兼容：全兼容
     高级浏览器 -> object text
     低级浏览器 -> 能获取相应的节点

   兼容写法

   var oNext = obj.nextElementSibling || obj.nextSibling;

3. 首尾节点

   • 首节点
     父节点.firstElementChild

         *兼容：高级浏览器
         低级浏览器 -> undefined
     

     父节点.firstChild

          *兼容：全兼容
           高级浏览器 -> object text
           低级浏览器 -> 能获取相应的节点
     

   兼容写法

   (1) 父节点.fisrtElementChild || 父节点.firstChild

   (2) 父节点.children[0]

   • 尾节点
     父节点.lastElementChild
     *兼容：高级浏览器
     低级浏览器 -> undefined
     父节点.lastChild
     *兼容：全兼容
     高级浏览器 -> object text
     低级浏览器 -> 能获取相应的节点

   兼容写法

   (1) 父节点.lastElementChild || 父节点.lastChild

   (2) 父节点.children[父节点.children.length - 1]

3. DOM节点操作

1. 创建一个节点
   var obj = document.createElement(‘tagName’);
2. 添加一个节点
   父节点.appendChild(要添加的节点);
   父节点.insertBefore(要添加的节点, 在谁前面添加);
3. 删除一个节点
   父节点.removeChild(要删除的节点);
4. 替换一个节点
   父节点.replaceChild(新节点, 删除的节点);

4. DOM属性操作

1. .
2. []
3. 可操作自定义属性
   
   • 获取属性 obj.getAttribute(属性的名字);
   • 设置属性 obj.setAttribute(属性的名字, 值);
   • 删除属性 obj.removeAttribute(属性的名字);

获取设置属性方法尽量不混用

5. BOM

1. window.open(地址, 方式); 打开新窗口
   返回值：新的窗体对象
   Chrome：拦截
   FF：阻止
   IE：直接打开
   *：用户自己打开的都不拦截
   打开方式：
   (1) _blank 新窗口打开(默认)
   (2) _self 当前页面打开
   about:blank 空白页
2. window.close(); 关闭当前窗口
   Chrome：直接关闭
   FF：没有反应
   IE：提示
   *：只能关闭自己open出来的窗口
3. window.location 获取地址栏信息
   返回值数据类型：object
   
   • window.location.href 获取地址栏信息
     返回值数据类型：string
   • window.location.search 获取地址栏信息中的数据
     返回值：?(包括?)后面的值
   • window.location.hash 获取地址栏信息中的锚点
     返回值：#(包括#)后面的值
   • window.location.protocol 获取地址栏信息中的协议
     返回值：eg: http:
   • window.location.host 获取地址栏信息中的域名
     返回值：eg：localhost:8080 baidu.com
   • window.location.port 获取地址栏信息中的端口
     返回值：eg：8080
   • window.location.pathname 获取地址栏信息中的路径
     返回值：eg：/../../xxx.html
4. window.history 获取地址的历史信息
   
   • window.history.forward() 前进
   • window.history.back() 后退
   • window.history.go(数字)
     前进时数字>0 -> 1代表前进1个页面
     后退时数字<0 -> -1代表后退1个页面
5. window.location.reload(); 强制刷新页面

---

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！