DOM对象

DOM对象

什么是DOM

• DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。
  • 创建的结构化文档：html、xml 等
  • DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。
• HTML DOM 将 整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员。
  

document 文档对象

标签元素的操作

1. 获得元素对象：
   根据id获得一个元素：getElementById(id属性值)
   根据标签名称获得多个元素：getElementsByTagName(标签名称)
   根据class属性获得多个元素：getElementsByClassName(class的属性值)
   根据name属性获得多个元素：getElementsByName(name属性值)
2. 创建一个新元素createElement()
3. 将元素放到某个父元素的内部appendChild()
4. 标签体的获取与设置：innerHTML

属性的操作

获得属性的值：getAtrribute(name)
设置属性的值：setAtrribute(name,value)
删除某个属性：removeAtrribute(name)

DOM练习1：getElementById 练习

<script type="text/javascript">
    //输出 <input type="text" name="username" value="传智播客10周年_1"  id="tid" >标签value属性的值
    var tidElement = document.getElementById("tid");
    alert(tidElement.value);
    //输出 <input type="text" name="username" value="传智播客10周年_1"  id="tid" >标签type属性的值
    alert(tidElement.type);
</script>

DOM练习2：getElementsByTagName 练习

<script  type="text/javascript">
    //获取所有的input元素,返回值是数组
    var inputs = document.getElementsByTagName("input");
    //测试长度
    alert(inputs.length);
    //遍历value的值
    for(var i=0;i<inputs.length;i++){
        alert(inputs[i].value);
    }
    //输出type="text"中 value属性的值 不包含按钮(button)
    for(var i=0;i<inputs.length;i++){
        if(inputs[i].type=="text")
            alert(inputs[i].value);
    }
    //输出所有下拉选 id="edu"中option标签中 value属性的值
    var eduElement = document.getElementById("edu");
    var eduOptions = eduElement.getElementsByTagName("option");
    for(var i=0;i<eduOptions.length;i++){
        alert(eduOptions[i].value);
    }
    
    function showSelect(){
        //输出所有下拉选select的option标签中value的值
        //输出选中的值
        var options = document.getElementsByTagName("option");
        for(var i=0; i< options.length;i++){
            if(options[i].selected)
                alert(options[i].value);
        }
    }
</script>

DOM练习3 getElementsByName 练习

<script type="text/javascript">
    //通过元素的name属性获取所有元素的引用  name="tname"
    //测试该数据的长度
    //遍历元素,输出所有value属性的值
    var inputs = document.getElementsByName("tname");
    /*for(var i=0;i<inputs.length;i++){
   	  alert(inputs[i].value);
   }*/
    //为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
    for(var i=0; i<inputs.length;i++){
        inputs[i].onchange=function(){
            alert(this.value);
        }
    }
</script>

DOM练习4 getAttribute 练习

<script  type="text/javascript">
    //<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
    var xjElement = document.getElementById("xj");
    alert(xjElement.getAttribute("value"));
</script>

DOM练习5 setAttribute 练习

<script type="text/javascript">
    //给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
    var xjElement = document.getElementById("xj");
    xjElement.setAttribute("name","xingjizhengba");
    //测试
    alert(xjElement.getAttribute("name"));

</script>

DOM练习6 innerHTML 练习

<script type="text/javascript">
    window.onload=function(){		
        //在div层中插入 <h1>海马</h1>
        var cityElement = document.getElementById("city");
        cityElement.innerHTML="<h1>海马</h1>";

        //在div层中插入“海马” 文本
        //cityElement.innerHTML="海马";
        //读取div的标签体内容
        alert(cityElement.innerHTML);
        //读取div的标签体文本内容
        alert(cityElement.innerText);
    }
</script>

DOM练习7 hasChildNodes 练习

<script  type="text/javascript">
    //查看id="edu"的节点是否含有子节点
    var eduElement = document.getElementById("edu");
    var flag = eduElement.hasChildNodes();
    alert(flag);
    //查看id="tid_1"的节点是否含有子节点
    var tid_1Element = document.getElementById("tid_1");
    flag = tid_1Element.hasChildNodes();
    alert(flag);
</script>

DOM练习8 removeChild 练习

<script  type="text/javascript">
    //删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
    var cityElement = document.getElementById("city");
    var bjElement = document.getElementById("bj");
    //cityElement.removeChild(bjElement);
    //获取北京的父节点
    var parent = bjElement.parentNode;
    alert(parent.id);
</script>

DOM练习9 replaceChild 练习

<script type="text/javascript">
    //点击北京节点， 将被反恐节点替换
    var bjElement = document.getElementById("bj");
    bjElement.onclick = function(){
        var cityElement = document.getElementById("city");
        var fkElement = document.getElementById("fk");
        cityElement.replaceChild(fkElement,bjElement);
    }
</script>

DOM练习10 createElement 练习

<script  type="text/javascript">
    //增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
    var cityElement = document.getElementById("city");
    var tjElement = document.createElement("li");
    tjElement.innerHTML="天津";
    tjElement.setAttribute("id","tj");
    tjElement.setAttribute("value","tianjin");
    cityElement.appendChild(tjElement);
</script>

<h4<DOM练习11 insertBefore 练习

<script  type="text/javascript">
    // 在重庆前面插入新的节点 <li id="tj" name="tianjin">天津</li>
    var cityElement = document.getElementById("city");
    var tjElement = document.createElement("li");
    tjElement.innerHTML="天津";
    tjElement.setAttribute("id","tj");
    tjElement.setAttribute("value","tianjin");
    var cityElement = document.getElementById("city");
    var cqElement = document.getElementById("cq");
    cityElement.insertBefore(tjElement,cqElement);
</script>