文档对象模型DOM（一）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

每加载一个标记 注释 或者属性，就将其当做节点（node）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应 

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素 

1)   getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p>

</body>
</html>
View Code

2)   getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" />

</body>
</html>
View Code

3) getElementsByName() 方法可返回带有指定名称的对象的集合。

注意一下（不兼容） 在ie它只得到标准元素中有name属性的
 FF chorem 都可以得到
 建议getElementsByName 推荐使用针对表单的时候
<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />

</body>
</html>
View Code
getElementByTagName(*)能得到所有元素节点，IE支持，不推荐使用。

兼容函数（getElementsByClassName）
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function myGetElementsByClassName(className){
            var els=[];
            if(document.all){//只认识IE；
//                alert(IE);
                var elements=document.getElementsByTagName("*");
//                alert(elements.length);
                for(var i=0;i<elements.length;i++){
                    if(elements[i].className==className){
                        els.push(elements[i]);
                    }
                }

            }
            else{
                els=document.getElementsByClassName(className);
            }
             return els;
        };
    </script>
</head>

<body>
<input type="button" class="input1" id="in" value="第一个"/><br/>
<input type="button" class="input1" name="one" value="第二个"/><br/>
<input type="button" class="input" name="two" value="第三个"/><br/>
<input type="button" class="input" name="one" value="第四个"/><br/>
<script>

    var els=document.getElementsByClassName("input");
//    alert(els.length);
    for(var i=0;i<els.length;i++){
        els[i].style.backgroundColor="blue";
    }
</script>
</body>
</html>
View Code

创建和操作节点；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            border: 1px red solid;
        }
        #one{
            width:100px;
            height: 100px;
        }
        #two{
            width:50px;
            height: 50px;
        }
    </style>


    <script>
     window.onload=function(){
         var bnt=document.getElementsByTagName('button')[0];
         bnt.onclick=function(){
             /*var p=document.createElement('p');
             var text=document.createTextNode('你好');
             p.appendChild(text);
             document.body.appendChild(p);
             */
             //我们可以使用一个简便的方法就是使用innerHTML;
             var p=document.createElement('p');
             p.innerHTML='<span>你好</span>';//这样可以直接添加很多的节点
             document.body.appendChild(p);//添加节点  appendChild 默认是的从最后开始添加

             var div = document.getElementById("one");
             //删除节点
           //  document.body.removeChild(div);
             var div2 = document.getElementById("two");
               //  div.removeChild(div2);

             var div5 = document.createElement("div");
             div5.innerHTML="div555";
             //替换子节点
            // div.replaceChild(div5,div2);//replaceChild(newnode,oldnode)

             //插入
             div.insertBefore(div5,div2);//insertBefore(newnode,oldnode)
             // 复制节点(参数) true 会复制它的子节点
             // false 只复制这个节点本事，但是不复制它的子节点
            // var div6 = div2.cloneNode(false);
             //div.appendChild(div6);

         };


     };
    </script>
</head>
<body>
<button>点击</button>
<div id="one">
    div1
       <div id="two">
            div2
       </div>
       <div>
            div3
       </div>
       <div>
           div4
       </div>

</div>
</body>
</html>
View Code

 




posted @ 2015-09-09 21:16  NAYNEHC  阅读(1141)  评论(0)  编辑  收藏  举报