javascript获取浏览器对象

window

• innerWidth 内部宽度
• innerHeight 高度

navigator

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

screen

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

location

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

• 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

• document.title
• document.cookie (服务端设置 httpOnly)

DOM元素操作

// 查

• document.getElementById() 唯一
• document.getElementsByTagName()
• document.getElementsByClassName() css选择器
• document.querySelector()
• document.querySelectorAll()

// 改

1. innerHTML （修改节点的内部内容）
2. innerText或textContent属性

• 两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本

3. appendChild 插入子节点
4. createElement 创建节点元素标签
5. insertBefore 插入指定节点前

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


var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
    
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

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

// 可见，使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：


var
    i, c,
    list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i个子节点
}

//删除

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