zoukankan      html  css  js  c++  java
  • JavaScript操作DOM


    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;


    制作固定广告:
    var adver;
    window.onload=function(){
    adver=document.getElementById("adver");
    }
    //onscroll:滚动条滚动时触发
    window.onscroll=function(){
    //获取滚动条滚动大小
    var scorlltop=document.documentElement.scrollTop||document.body.scrollTop;
    var scorllleft=document.documentElement.scrollLeft||document.body.scrollLeft;
    //元素跟随滚动条一起变化
    adver.style.top=scorlltop+30+"px";
    adver.style.left=scorllleft+10+"px";
    }

  • 相关阅读:
    聊聊WS-Federation
    用双十一的故事串起碎片的网络协议(上)
    责任链模式的使用-Netty ChannelPipeline和Mina IoFilterChain分析
    最小化局部边际的合并聚类算法(中篇)
    最小化局部边际的合并聚类算法(上篇)
    UVaLive 7371 Triangle (水题,判矩形)
    UVaLive 7372 Excellence (水题,贪心)
    POJ 3312 Mahershalalhashbaz, Nebuchadnezzar, and Billy Bob Benjamin Go to the Regionals (水题,贪心)
    UVa 1252 Twenty Questions (状压DP+记忆化搜索)
    UVa 10817 Headmaster's Headache (状压DP+记忆化搜索)
  • 原文地址:https://www.cnblogs.com/mayuan01/p/10978898.html
Copyright © 2011-2022 走看看