JavaScript DOM进阶方法(2)

Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodeValue是注释的内容;
     var box = document.getElementById('box');
     alert(box.firstChild);                        // Comment;

6.Attr类型
 Attr类型表示文档元素中的属性;nodeType为11;nodeName为属性名,nodeValue为属性值;详细内容在上一章;

二 DOM扩展
1.呈现模式

// 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明; // IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式; // 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat; if(document.compatMode == 'CSS1Compat'){ alert(document.documentElement.clientWidth); }else{ alert(document.body.clientWidth); }

2.滚动

DOM提供了一些滚动页面的方法
   document.getElementById('box').scrollIntoView();        // 设置指定可见;

3.children属性

由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的;
     var box = docuemnt.getElementById('box');
     alert(box.children.length);                             // 得到有效子节点数目;

4.contains()方法

判断一个节点是不是另一个节点的后代,可以使用contains()方法;
    var box = document.getElementById('box');
    alert(box.contains(box.firstChild));                    // =>true;

三 DOM操作内容
1.innerText属性

document.getElementById('box').innerText; // 获取文本内容(如有html直接过滤掉); document.getElementById('box').innerText = 'Mr.Lee'; // 设置文本(如有html转义); // PS:除了Firefox之外,其他浏览器均支持这个方法;Firefox的DOM3级提供了另外一个类似的属性:textContent; // 兼容方法 function getInnerText(element){ return (typeof element.textContent == 'string')?element.textContent:element.innerText; } function setInnerText(element,text){ if(typeof element.textContent == 'string'){ element.textContent = text; }else{ element.innerText = text; } }

2.innerHTML属性

innerHTML属性可以解析HTML;
     document.getElementById('box').innerHTML;                   // 获取文本(不过滤HTML);
     document.getElementById('box').innerHTML = '<b>123</b>';    // 加粗的123;
 虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了;
    box.innerHTML = "<script>alert('Lee');</script>";           // <script>元素不能被执行;
    box.innerHTML = "<style>background:red;</style>";           // <style>元素不能被执行;

3.outerText

outerText在取值的时候和innerText一样,同时Firefox不支持;
 而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去;
     var box = document.getElementById('box');
     box.outerText = '<b>123</b>';
     alert(document.getElementById('box'));                       // =>null; 不建议使用;

4.outerHTML

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgjffx.html