JavaScript操作DOM对象

Posted 2021-12-21 zzzzn

一、DOM:Document Object Model 文档对象模型
　　Dom分类：Dom core;html Dom;Css Dom;

二、根据层次访问节点：
　　　　parentNode 返回节点的父节点
　　　　childNodes 返回子节点集合，childNodes[i]
　　　　firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
　　　　lastChild 返回节点的最后一个子节点
　　　　nextSibling 下一个节点
　　　　previousSibling 上一个节点
　　解决浏览器兼容问题：
　　　　firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
　　　　lastElementChild 返回节点的最后一个子节点
　　　　nextElementSibling 下一个节点
　　　　previousElementSibling 上一个节点
　　例如：oNext = oParent.nextElementSibling || oParent.nextSibling
三、节点信息：
　　　　nodeName：节点名称
　　　　nodeValue：节点值
　　　　nodeType：节点类型

四、操作节点：
　　节点属性：
　　　　getAttribute("属性名")
　　　　setAttribute("属性名","属性值")
　　创建和插入节点：
　　　　createElement( tagName) 创建一个标签名为tagName的新元素节点
　　　　A.appendChild( B) 把B节点追加至A节点的末尾
　　　　insertBefore( A,B ) 把A节点插入到B节点之前
　　　　cloneNode(deep) 复制某个指定的节点
　　删除和替换节点：
　　　　removeChild( node) 删除指定的节点
　　　　replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

　　操作节点样式：

/* 元素.style.样式属性 */
        function whtmouseover() 
            //要让王洪涛字体变小     颜色变绿
            document.getElementById("wht").style.fontSize="15px";
            document.getElementById("wht").style.color="green";
        ;
        function whtmouseout() 
            //要让王洪涛字体变小     颜色变绿
            document.getElementById("wht").style.fontSize="8px";
            document.getElementById("wht").style.backgroundColor="pink";
        ;
        /* 元素.className   事先在样式中创建名为.className的值的样式列表*/
        function lbmouseover() 
            document.getElementById("lb").className="lb";
        ;
        function lbmouseout() 
            document.getElementById("lb").className="lbout";
        ;
        
        /* 第三种方式： 元素.style.cssText="css属性值"*/
        function llmouseover() 
            document.getElementById("ll").style.cssText="color:red;font-size:10px;";
        
        function llmouseout() 
            document.getElementById("ll").style.cssText="color:black;font-size:60px;";
        

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