社区首页 >专栏 >DOM

DOM

Wyc

发布于 2018-09-11 03:26:53

87400

代码可运行

文章被收录于专栏：Python研发Python研发

运行总次数：0

代码可运行

文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的内容呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是javascript语言规范的规定的核心内容·

一丶查找元素

1·直接查找

document.getElementById              //根据ID获取一个标签
document.getElementsByName            //根据name属性获取标签集合
document.getElementsByClassName    //根据class属性获取标签集合
document.getElementsByTagName      //根据标签名获取标签集合

2·简介查找

parentNode          //父节点
childNodes            //所有子节点
fistChild                 //第一个子节点
lastChild                 //最后一个子节点
nextSibling              //下一个兄弟节点
previousSibling        //上衣个兄弟节点


parentElement           //父节点标签元素
children                      //所有子标签
firstElementChild          //第一个子标签元素
lastElementChild           //最后一个子标签元素
nextElementtSibling       //下一个兄弟标签元素
previousElementSibling      //上一个兄弟标签元素

二丶操作　

1丶内容

innerText             //文本
outerText
innerHTML       //HTML内容
innerHTML
value               //值

2丶属性

attrbutes                        //索取所有标签属性
setAttribute(key,value)    //设置标签属性
getAttribute(key)             //获取指定标签属性


/*
var atr = document.createAttribute("class");
atr.nodeValue = "democlass";
document.detElementById("n1").setAttributeNode(atr);
*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="bottob" value="全选" onclick="CheckAll();"/>
    <input type="bottob" value="取消" onclick="CheckAll();"/>
    <input type="button" value="反选" onclick="ReverseCheck();"/>
    <table border="1">
        <thead>
        </therd>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>
             <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>         
             <tr>
                <td><input type="checkbox"/></td>
                <td>66666</td>
                <td>88888</td>
             </tr>   
    </table>
    <script>
        function CheckAll(tha){
            var tb = document.getElementById("tb");
            var trs = tv.childNodes;
            for(var i=0;i<trs.lengt;i++){
               var current_tr = trs[i];
               if(current_tr.nodeType == 1){
                   var inp = current_tr.firstElementChild.getElementByTagName("input")[0];
                    inp.checked = true;
               }
            }
         }  
        function CancelAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = false;
                }
            }
        }
        function ReverseCheck(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){
                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    if(inp.checked){
                        inp.checked = false;
                    }else{
                        inp.checked = true;
                    }
                }
            }
        }


             
    </script>

3丶class操作

className                      //获取所有类名
classList.remove(cls)           //删除指定类
classList.add(cls)                 //添加类

4丶标签操作　

a·创建标签

//方式一

var tag = document.createElement("a")
tag.innerText = "Wyc"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wuyongcong"



//方式二

var tag = "<a class="c1" href = "http://www.cnblogs.com/wuyongcong">wuyongcong</a>"

b·操作标签　

//方式一

var obj = "<input type="text" />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement("afterBegin",document.createElement("p"))

//注意:第一个参数只能是"beforeBegin","afterBegin","befoeEnd","afterEnd"


//方式二

var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5丶样式操作

var obj = document.getElementById("i1")

obj.style.fontSize = "32px";
obj.style.backgroundColor = "blue";

<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color:gray;"/>
<script>
    function Focus(ths){
        ths.style.color = "black";
        if(ths.value == "请输入关键字" || ths.value.trim() == ""){
            ths.value = "";
        }
     }
     function Blur(ths){
         if(ths.value.trim() == ""){
           ths.value.color = "gray";
         }else{
                ths.style.color = "black";
         }
      }
</script>

6丶位置操作

//总文档高宽
document.documentElement.offsetHeight


//当前文档占屏膜高宽
document.documentElement..clientHeight


//自身高度
tag.offsetHeight


//距离上级定位高度
tag.offsetTop


//父定位标签
tag.offsetParent


//滚动高度
tag.scrollTop

/*
        clientHeight  -> 课件区域: height + padding
        clienTop    ->  border高度
        offsetHeight   ->  可见区域:height + padding + border
        offsetTop     ->  上级定位标签的高度
        scrollHeight     -> 全文高:height  +  padding
        scrollTop     ->   滚动高度
        特别的:
                document.documentElement代指文档根节点
*/

7丶提交表单　　

document.getElementById("form").submit()

8丶其他操作

console.log        //输出框

alert                  //弹出框

confirm              //确认框


//    URL和刷新

location.href                 //获取URL

location.href = "url"           //重定向

location.reload()                 //重新加载


//定时器
setInterval                        //多次定时器

clearInterval                     //清除多次定时器

setTimeout                       //单次定时器

clearTimeout                      //清除单词定时器