DOM总结

最新推荐文章于 2024-09-02 17:34:07 发布

aclg25510

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sstone/p/8485176.html

版权

一、DOM操作技术

　　1.动态脚本　

<html>
    <body>
    </body>
</html>

<script>
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = "function say(){alert('hi')}";
    document.body.appendChild(script);
    say();
</script>

　　以上版本,safari3.0之前的版本不能支持，但却允许使用文本节点技术来指定代码，故做出兼容的代码如下：

<script>
    function loadScriptString(code){
        var script = document.createElement("script");
        script.type = "text/javascript";
        try{
            // 除IE浏览器外，所有浏览器都支持这种方式
            script.appendChild(document.createTextNode(code));
        }catch(ex){
            // IE浏览器支持的方式
            script.text = code;
        }
        document.body.appendChild(script);
    }
    loadScriptString("function say(){alert('Hello World')}");
    say();
</script>

　　2.动态样式

　　3.DOM扩展

　　　　1) querySelector()方法

　　　　　　此方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有匹配的元素，返回null

　　　　　　var body = document.querySelectory("body");

　　　　　　通过Document类型调用querySelector()方法时，会在文档范围内查找匹配的元素。而通过Element类型调用该方法时，只会在该元素后代元素的范围内

　　　　　　查找匹配的元素。

　　　　2)querySelectorAll()方法接收的参数与querySelector()一样，都是一个CSS选择符，它返回一个NodeList实例。

　　　　　　var ps = document.getElementById("myDiv").querySelectorAll("p"); // 取得myDiv中的所有p元素

　　　　3)HTML5对类相关的补充

　　　　　　a)getElementsByClassName()

　　　　　　　　方法接收一个参数，包含一个或多个类名的字符串，返回带有指定类的所有元素NodeList。传入多个类名时，类名的

　　　　　　　　先后顺序不重要，以空格分隔。

　　　　　　　　var all = documents.getElementsByClassName("a b");

　　　　　　b)classList属性

　　　　　　　　HTML5新增了一种操作类名的方式，可以让操作更安全也更简单，那就是为所有的元素添加classList属性。classList是新集合类型

　　　　　　　　DOMTokenList的实例。这个新类型含有length属性，还定义了如下方法：

　　　　　　　　　　add(value)：将制定的字符串添加到列表中，如果已存在，则忽略

　　　　　　　　　　contains(value)：存在返回true，反之false

　　　　　　　　　　remove(value)：从列表中删除指定的字符串

　　　　　　　　　　toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

　　　　　　　　示例：

　　　　　　　　　　div.classList.remove("b"); // 删除b类

　　　　　　　　　　div.classList.add("d"); // 添加d类

　　　　4)HTML5焦点管理

　　　　　　var button = document.getElementById("myButton");

　　　　　　button.focus();

　　　　　　alert(document.activeElement === button) // true

　　　　　　以上例子中使用了activeElement属性，这是HTML5添加的辅助焦点管理的属性。这个属性始终会引用DOM中当前获得焦点的元素。

　　　　　　document.hasFocus()方法，用于确定文档是否获得了焦点

　　　　　　var button = document.getElementById("myButton");

　　　　　　button.focus();

　　　　　　alert(document.hasFocus()); // true

　　　　　　通过检测焦点，可以知道用户是否正在与页面进行交互

　　4.元素大小

　　　　1.偏移量

- - offsetHeight:元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上下边框的高度。
  - offsetWidth:元素在水平方向上占用的空间大小，以像素计。包括元素的高度、（可见的）垂直滚动条的高度、左右边框的高度。　　
  - offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离
  - offsetTop:元素的上外边框至包含元素的上内边框的像素距离

　　　　　　其中， offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent
　　　　属性中。 offsetParent 属性不一定与 parentNode 的值相等。例如， <td>元素的 offsetParent 是
　　　　作为其祖先元素的<table>元素，因为<table>是在 DOM 层次中距<td>最近的一个具有大小的元素。

　　　　要想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent
　　　　的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。以下两个函数就可以用于分别
　　　　取得元素的左和上偏移量。

    function getElementLeft(element) {
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;
        while (current !== null) {
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    }

　　　　2.客户区大小

　　　　　　元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientHeight和clientWidth

　　　　3.滚动大小

- - scrollHeight:在没有滚动条的情况下，元素内容的总高度（包括内边距）
  - scrollWidth:在没有滚动条的情况下，元素内容的总高度（包括内边距）
  - scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
  - scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

这篇博客里有DOM扩展的总结：https://www.cnblogs.com/xiaohuochai/p/5821803.html#anchor3

转载于:https://www.cnblogs.com/sstone/p/8485176.html

aclg25510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM总结

一、DOM操作技术　　1.动态脚本　<html> <body> </body></html><script> var script = document.createElement("script"); script.type = "text/javascrip...
复制链接

扫一扫