JavaScript的DOM对象-CSDN博客

对象模型与DOM

对象模型对于HTML网页来说，就是一种规范如何访问HTML元素，样式或程序代码的机制，可以将HTML元素，样式或程序代码视为对象。

DOM可以用来处理HTML网页和XML文件，针对HTML网页的DOM称为HTML DOM,

DOM对象模型提供了一组标准的编程接口，我们可以通过这组接口来访问对象的属性和方法。

当网页加载时，浏览器会自动创建页面的文档对象模型

获取HTML元素节点

使用id属性来获取元素节点

getElementById()方法

getElementById() 返回带有指定 ID 的元素。

注：JavaScript程序代码获取HTML DOM是使用document，他是浏览器对象模型中的window根对象的属性。

可以在使用 nodeName或tagName属性获取节点的标签名称。

getElementsByTagName()方法返回的是一个NodeList对象，我们可以使用item（）方法来获得指定的节点对象。

同样我们也可以直接将NodeList对象当成数组来取得指定的下标值得节点元素。

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

getElementsByName() 根据name获取元素节点

更改元素的内容

我们可以使用innerHTML属性访问HTML元素，innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

改变元素内容的最简单的方法是使用 innerHTML 属性。

存取HTML元素的尺寸与位置

 <script  type ="text/javascript">
        function showposition()
        {
            var p = document.getElementById("myId");
            alert("left"+ p.offsetLeft+"top"+p.offsetTop);
        }
        function showSize() {
            var p = document.getElementById("myId");
            alert("高" + p.offsetHeight + "宽" + p.offsetWidth);
        }
        function showParent() {
            var p = document.getElementById("myId");
            alert("父级元素" + p.offsetParent.tagName);
        }
    </script>
    <p  id="myId">HTML元素</p>
    <form>
      <input type="button" οnclick="showposition()" value="元素的位置" />
        <input type="button" οnclick="showSize()" value="元素尺寸" />
        <input type="button" οnclick="showParent()" value="显示父元素" />
    </form>