Javascript进阶

浏览器

浏览器对象

// window不仅充当全局变量，且表示浏览器窗口。常用属性
innerWidth/innerHeight // 浏览器内部宽高
outerWidth/outerHeight // 浏览器外部宽高

// navigator表示浏览器信息，d常用属性：
navigator.appName // 浏览器名称；
navigator.appVersion // 浏览器版本；
navigator.language // 浏览器设置的语言；
navigator.platform // 操作系统类型；
navigator.userAgent // 浏览器设定的User-Agent字符串

// screen 表示屏幕信息。常用属性：
screen.width // 屏幕宽度，以像素为单位
screen.height // 屏幕高度，以像素为单位
screen.colorDepth // 返回颜色位数，如8、16、24

// 表示当前页面的URL信息
// e.g. 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对象表示当前页面
// 由于HTML在浏览器中以DOM形式表示为树形结构
// document对象就是整个DOM树的根节点

// history
history.back() // 浏览器后退
history.forward() // 浏览器前进
// 强烈建议不y使用

DOM

1. 获取DOM

   • 通过 document.getElementById() 获取一个节点， 通过document.getElementsByTagName()和document.getElementsByClassName()获取一组节点

     // 返回ID为'test'的节点：
     var test = document.getElementById('test');
     
     // 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
     var trs = document.getElementById('test-table').getElementsByTagName('tr');
     
     // 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
     var reds = document.getElementById('test-div').getElementsByClassName('red');
     
     // 获取节点test下的所有直属子节点:
     var cs = test.children;
     
     // 获取节点test下第一个、最后一个子节点：
     var first = test.firstElementChild;
     var last = test.lastElementChild;
     
     // 拿到父节点
     var father = test.parentElement;
     

   • 使用CSS选择器

     // 通过querySelector获取ID为q1的节点：
     var q1 = document.querySelector('#q1');
     
     // 通过querySelectorAll获取q1节点内的符合条件的所有节点：
     var ps = q1.querySelectorAll('div.highlighted > p');
     

2. 更新DOM

   • 修改 innerHTML 属性，可以在其中添加DOM子树

   • 修改 innerText 或 textContent 属性, 会自动对字符串进行HTML编码，保证其中不包含任何标签

     // 获取<p id="p-id">...</p>
     var p = document.getElementById('p-id');
     // 设置文本:
     p.innerText = '<script>alert("Hi")</script>';
     // HTML被自动编码，无法设置一个<script>节点:
     // <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>
     

   • DOM节点中的 style 属性中包含所有CSS属性，可以直接获取或设置。但是CSS中短横杆 - 需要去掉，并改成小驼峰

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

3. 插入DOM

   • 使用 appendChild 将DOM树中已有的element移动到对应元素的最后一项

     <!-- 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>
     
     var
         js = document.getElementById('js'),
         list = document.getElementById('list');
     list.appendChild(js);
     

   • 新增可使用 document.createElement() , 参数为tag名称，如 p div 等，然后利用 innerHTML 等修改DOM元素内容，最后再用 appendChild()

     var d = document.createElement('style');
     d.setAttribute('type', 'text/css');
     d.innerHTML = 'p { color: red }';
     document.getElementsByTagName('head')[0].appendChild(d);
     

   • 使用 insertBefore(new, ref) 将新节点插入到 ref 节点之前

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

4. 删除DOM

   • 获取子节点及其父节点，调用父节点 removeChild(child) 删除
   • 注意节点调用的children属性是实时更新的，所以删除后元素个数会变化

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

未完待续。。。