DOM

DOM:文档对象模型

访问节点：

        使用getElement系列方法访问指定节点

               getElementById()     -根据id

               getElementsByName()   -根据name

               getElementsByTagName()    -根据标签

        根据层次关系访问节点

               节点属性

                      firstChild：第一个节点     lastChild：最后一个节点

                      nextSibling：下一个节点    previousSibling

               element属性

                      firstElementChild：返回节点字节的第一个节点

                      lastElementChild：返回节点字节的最后一个节点

                      nextElementSibling：下一个节点

                      previousElementSibling：上一个节点

      节点信息

              nodeName：节点名称

              nodeValue：节点值

              nodeType：节点类型

                      

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

 

    操作节点属性：       

            getAttribute("属性名") ：获得节点属性

            setAttribute("属性名","属性值")：设置节点属性

    创建和插入节点

            createElement（name）：创建一个标签名为tagName的新元素节点

            a.appendChild(b):把b节点追加至a节点的某尾

            insertBefore（a，b）：把a节点插入到b节点之前

            cloneNode（name）：复制某指定的节点

   删除和替换节点

            removeChild（name）：删除指定节点

            placeChild（newName，oldName）：新节点替换指定的节点

操作节点属性

       style属性

              语法：HTML元素.style.样式属性=“值”；

              示例：document.etElementByld（“wrap”）.style.color=“#fff”；

名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

      className属性

                      语法： HTML元素.className=“样式名称”；

                      示例：document.getElementById（“cart”）.className=“cartOver”；

      获得元素样式

              语法：HTML元素.style.样式属性

                        alert(document.getElementById("cartList").style.display);

              语法：HTML元素.currentStyle.样式属性；

                       alert(document.getElementById("cartList").currentStyle.display);

HTML中元素属性

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度