Javascrpit(二)浏览器编程

一.大致面向浏览器编程

• 调整输出窗口的大小

  console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
  

• navigator
  浏览器的信息

  navigator.appName：浏览器名称；
  navigator.appVersion：浏览器版本；
  navigator.language：浏览器设置的语言；
  navigator.platform：操作系统类型；
  navigator.userAgent：浏览器设定的User-Agent字符串。
  

• location
  对象表示当前页面的URL信息。

    location.protocol; // 'http'
  location.host; // 'www.example.com'
  location.port; // '8080'
  location.pathname; // '/path/index.html'
  location.search; // '?a=1&b=2'
  location.hash; // 'TOP'
  

• document
  对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

  用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点：
  
  JavaScript可以通过document.cookie读取到当前页面的Cookie：
  
  document.cookie; // 'v=123; remember=true; prefer=zh'
  

• history对象

    JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。
  

三.操作DOM

• 更新DOM
  // 获取<p id="p-id">...</p>
  var p = document.getElementById('p-id');
  // 设置文本为abc:
  p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
  // 设置HTML:
  p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
  // <p>...</p>的内部结构已修改

第二种方法

  // 获取<p id="p-id">...</p>
   var p = document.getElementById('p-id');
    // 设置CSS:
  p.style.color = '#ff0000';
  p.style.fontSize = '20px';
  p.style.paddingTop = '2em';

• 插入DOM

  <!-- HTML结构 -->
  <p id="js">JavaScript</p>
  <div id="list">
      <p id="java">Java</p>
      <p id="python">Python</p>
      <p id="scheme">Scheme</p>
  </div>
  

把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：

var
js = document.getElementById('js'),
list = document.getElementById('list');
list.appendChild(js);

• 删除DOM

  var self = document.getElementById('to-be-removed');
  // 拿到父节点:
  var parent = self.parentElement;
  // 删除:
  var removed = parent.removeChild(self);
  removed === self; // true
  

例如，对于如下HTML结构：

<div id="parent">
    <p>First</p>
<p>Second</p>
</div>

当我们用如下代码删除子节点时：

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错