Dom

Document Object Model文档对象模型，是一种树形结构
�

获取Dom

  1. /**
  2.  * 获取Dom
  3.  */
  5. console.log('----getElementById----');
  6. let byId = document.getElementById('list');
  7. console.log(byId);
  9. console.log('----getElementsByTagName----');
  10. let byTag = document.getElementsByTagName('ul');
  11. console.log(byTag[0]);
  13. console.log('----getElementsByClassName----');
  14. let byClass = document.getElementsByClassName('list');
  15. console.log(byClass[0]);
  17. console.log('----querySelectorAll----');
  18. let bySelector = document.querySelectorAll('.list');
  19. console.log(bySelector[0]);

修改样式

  1. /**
  2.  * 修改样式 两者都可能引起dom重新渲染
  3.  */
  5. // property方式，修改对象的属性，不会体现到html结构中
  6. byId.style.fontSize = '32px';
  8. // attribute方式，修改html属性，会改变html结构
  9. byId.setAttribute('style', 'color: #444');

操作Dom

操作Dom比较耗时和耗资源，避免频繁的操作Dom
优化：

  1. 将查询结果缓存下来
  2. 将多次操作合并成一次来完成 ```javascript /**
    • 操作Dom
    • @type {Element} */ // 避免频繁操作Dom， let $list = document.querySelectorAll(‘.list’)[0];

// 创建一个文档片段，此时并没有插入到Dom结构当中 let virDom = document.createDocumentFragment();

for (let i = 0; i < 10; i++) { let $li = document.createElement(‘li’); $li.innerHTML = This is ${i} item; // 先插入到文档片段当中 virDom.appendChild($li); }

// 一次完成 $list.appendChild(virDom);

  2. <a name="aFpTc"></a>
  3. ## Bom
  5. `Browser Object Model`浏览器对象模型
  7. 包含，<br />location、screen、navigator、history<br />�
  8. <a name="S7mJx"></a>
  9. ### location
  11. 提供文档有关信息与导航功能
  13. ```javascript
  14. assign: ƒ assign()
  15. hash: ""
  16. host: "localhost:63342"
  17. hostname: "localhost"
  18. href: "http://localhost:63342/daily-code/javascript/js-web-api/bom.html?_ijt=mi6ohh0fq2vcn0nrpjmpqe1b0a&_ij_reload=RELOAD_ON_SAVE"
  19. origin: "http://localhost:63342"
  20. pathname: "/daily-code/javascript/js-web-api/bom.html"
  21. port: "63342"
  22. protocol: "http:"
  23. reload: ƒ reload()
  24. replace: ƒ replace()
  25. search: "?size=10&page=1"

将url参数，转换为对象的实现

  1. let getParams = function () {
  2.     // 将参数转换为键值对形式
  3.     let search = location.search;
  4.     let searchList = [];
  5.     let params = {};
  6.     if (search && search.length > 0) {
  7.         searchList = search.substring(1).split('&');
  8.         searchList.map(item => {
  9.             let query = item.split('=');
  10.             params[query[0]] = query[1];
  11.         });
  12.     }
  13.     console.log(params);
  14.     return params;
  15. }
  16. getParams();

navigator

浏览器信息，获取浏览器用户代理字符串，使用 navigator.userAgent

iOS设备检测

  1. /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) // i，不区分大小写

screen

浏览器外部显示器信息，基本用不到

  1. availHeight: 1127
  2. availLeft: -2048
  3. availTop: -113
  4. availWidth: 2048
  5. colorDepth: 24
  6. height: 1152
  7. orientation: ScreenOrientation {angle: 0, type: 'landscape-primary', onchange: null}
  8. pixelDepth: 24
  9. width: 2048

history

用户上网的历史记录，可以操作前进或者后退跳转到任意页面

  1. history.length // History.length是一个只读属性，返回当前session中的history个数，包含当前页面在内
  2. history.back(); // 后退
  3. history.forward(); // 前进
  4. history.go(3); // 前进
  5. history.go(-3); // 后退
  6. history.pushState(state, title[, url]) // 向当前浏览器会话的历史堆栈中添加一个状态
  7. history.replaceState(state, title[, url]); // 修改当前历史记录实体

defer和async

不会阻塞页面

  • defer
    Dom解析完成后执行，

加载顺序先后执行

  • async
    立即加载，无先后顺序
    两个跟DOMContentLoaded无关，都在window.onload之后执行