zoukankan      html  css  js  c++  java
  • javascript之DOM篇一

    一.什么是DOM 

      DOM是用来操作页面,如div的获取,修改样式

    二.DOM节点

      标签(css)=元素(js)=节点(DOM)

    1.子节点 childNodes 仅算父元素下的第一层

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <script type="text/javascript">
    window.onload=function() {
    var oUl=document.getElementById('ul1');
    alert(oUl.childNodes.length);
    for (var i = 0; i < oUl.childNodes.length; i++) {
    alert(oUl.childNodes[i].nodeType);
    if(oUl.childNodes[i].nodeType==1)
    {
    oUl.childNodes[i].style.background='red';
    }
    }
    }//算节点个数,判断节点类型,改变节点背景颜色
    </script>
    </body>
    </html>

    引出问题:

    节点类型 节点分为文本节点(即为空节点) 与元素节点(<></>) 

    nodeType  nodeType=3-->文本节点   nodeType=1-->元素节点

    在ie6~8中忽略文本节点,而ie9、谷歌等不会忽略文本节点

    解决兼容性问题可用if--else

    也可直接用children 代码如下

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <script type="text/javascript">
    window.onload=function() {
    var oUl=document.getElementById('ul1');
    alert(oUl.children.length);
    }
    </script>
    </body>
    </html>//算节点个数

    2.父节点 parentNode

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    <body>
    <ul id="ul1">
    <li>fgergerg<a href="#">隐藏</a></li>
    <li>weete<a href="#">隐藏</a></li>
    <li>rrtret<a href="#">隐藏</a></li>
    <li>sergh<a href="#">隐藏</a></li>
    <li>ehkuyr<a href="#">隐藏</a></li>
    </ul>
    <script type="text/javascript">
    window.onload=function() {
    var aA=document.getElementsByTagName('a');

    for (var i = 0; i < aA.length; i++) {
    aA[i].onclick=function()
    {
    this.parentNode.style.display='none';
    }
    }
    }
    </script>
    </body>
    </html>//隐藏<li>

    引出:offsetParent--->用来判断某个元素定位的父级

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    #div1{
    background-color: blue; 200px;height: 200px;margin:100px;/*position: relative;*/
    }
    #div2{
    background-color: red; 100px;height: 100px;position: absolute;left: 50px;top: 50px;
    }
    </style>
    </head>
    <body>
    <div id="div1">
    <div id="div2"></div>
    </div>
    <script type="text/javascript">
    window.onload=function() {
    var oDiv2=document.getElementById('div2');
    alert(oDiv2.offsetParent);
    }
    </script>
    </body>
    </html>//判断div2所用来定位的父元素

    3.首尾节点,兄弟节点

    有兼容性

    firstChild   lastChild首尾

    nextSibling   previousSibling兄弟节点

    解决方法

    firstElementChild   lastElementChild首尾

    nextElementSibling   previousElementSibling兄弟节点

    4.DOM获取元素

    获取getAttribute(名称)

    设置setAttribute(‘属性名’,值)

    删除removeAttribute(名称)

    5.用className选择元素

    特征:可批量,有选择性,页面发生变化不会出错

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    <body>
    <ul id="ul1">
    <li class="box"></li>
    <li class="box"></li>
    <li></li>
    <li></li>
    <li class="box"></li>
    </ul>
    <script type="text/javascript">
    function getByClass(oParent,sClass)
    {
    var aResult=[];
    var aEle=oParent.getElementsByTagName('*');

    for (var i = 0; i < aEle.length; i++) {
    if(aEle[i].className==sClass)
    {
    aResult.push(aEle[i]);
    }
    }
    return aResult;
    }
    window.onload=function () {
    var oUl=document.getElementById('ul1');
    var aBox=getByClass(oUl,'box');

    for (var i = 0; i < aBox.length; i++) {
    aBox[i].style.background='red';
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    English 2
    速算24点
    心理学1
    从微服务到函数式编程
    034 01 Android 零基础入门 01 Java基础语法 04 Java流程控制之选择结构 01 流程控制概述
    033 01 Android 零基础入门 01 Java基础语法 03 Java运算符 13 运算符和表达式知识点总结
    032 01 Android 零基础入门 01 Java基础语法 03 Java运算符 12 运算符和if-else条件语句的综合案例——闰年问题
    031 01 Android 零基础入门 01 Java基础语法 03 Java运算符 11 运算符的优先级
    030 01 Android 零基础入门 01 Java基础语法 03 Java运算符 10 条件运算符
    029 01 Android 零基础入门 01 Java基础语法 03 Java运算符 09 逻辑“非”运算符
  • 原文地址:https://www.cnblogs.com/huixinyudeboke/p/5263696.html
Copyright © 2011-2022 走看看