您的位置: 首页  >  IT文章  >  DOM

DOM

分类: IT文章 • 2022-09-01 10:25:17

一、DOM简介

1、简介

　　文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口，它定义了访问HTML和XML文档的标准。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。

DOM

DOM规定文档中的每个成分都是一个节点（Node）：

文档节点（Document）：代表整个文档
元素节点（Element）：文档中的一个标记
文本节点（Text）：标记中的文本
属性节点（Attr）：代表一个属性，元素才有属性

2、节点类型

  • NodeType属性来表明节点类型

DOM

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>

    <body>
        <div id="div1"></div>
        <script type="text/javascript">
            var div1 = document.getElementById("div1");
            console.log(div1.nodeType); //结点类型 1    Element    代表元素
            console.log(div1.nodeName); //DIV 结点名称
            var id = div1.getAttributeNode("id"); //获得div1的属性结点id
            console.log(id.nodeType); //2    Attr    代表属性
            console.log(id.nodeName); //id 结点名称 
        </script>
    </body>

</html>

3、节点属性

DOM

二、查找元素

1、直接查找

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

# 集合取第一个，后面加[0]

2、间接查找

用带element的找到的一定是标签元素，不带的会找到标签元素下面的换行节点，是空的，所以尽量用带element的；

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

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

3、局部查找

先找到一个标签对象，再在它的子节点中查找；

<div >

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div >i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

三、操作

1、内容

innerText     # 标签下的所有文本内容，包括所有子标签的文本
innerHTML   # 标签下的所有内容，包括文本和子标签 
value          # input标签的输入值
<a id="i1">百度<span>666</span></a>

var t=document.getElementById("i1")
t.innerText
"百度666"
t.innerHTML
"百度<span>666</span>"

2、属性

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

<body>
    <input id="i1" type="checkbox"/>
    <script>
        var t = document.getElementById("i1");
        t.setAttribute('checked','checked')
    </script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" onclick="CheckAll()" value="全选"/>
    <input type="button" onclick="CancelAll()" value="取消"/>
    <input type="button" onclick="ReverseAll()" value="反选"/>
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input id="i1" type="checkbox"/></td>
                <td>a</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input id="i2" type="checkbox"/></td>
                <td>b</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input id="i3" type="checkbox"/></td>
                <td>c</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll() {
            var tb = document.getElementById("tb");
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                // ck.setAttribute('checked','checked');
                ck.checked = true;
            }
        }
        function CancelAll() {
            var tb = document.getElementById("tb");
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                // ck.removeAttribute('checked','checked');
                ck.checked = false;
            }
        }
        function ReverseAll() {
            var tb = document.getElementById("tb");
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                if(ck.checked){
                    ck.checked = false;
                }else{
                    ck.checked = true;
                }
            }
        }
    </script>
</body>
</html>
全选-取消-反选

3、class操作

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

4、标签操作

a.创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "Charlie"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"

// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操作标签

// ******添加标签*******

// 方式一：字符串形式
var obj = "<a>百度一下</a>";
//把字符串当做标签添加
xxx.insertAdjacentHTML("beforeEnd",obj);
//把字符串当做文本添加
xxx.insertAdjacentText("beforeEnd",obj);
//添加标签对象
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一个参数只能是
'beforeBegin'外部标签的前面、 
'afterBegin'内部标签的前面、 
'beforeEnd'外部标签的后面、 
'afterEnd'内部标签的后面

// 方式二：对象形式
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

// *******删除标签*******

获得要删除的元素 var son
获得它的父元素  var father
使用father.removeChild(son)方法删除

// *******修改标签*******

//第一种方式:使用上面增和删结合完成修改

//第二中方式:

使用setAttribute();方法修改属性          

使用innerHTML属性修改元素的内容

5、样式操作

var obj = document.getElementById('i1')
<!--注意书写方式-->
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

6、位置操作

//总文档高度
document.documentElement.offsetHeight
 
//当前文档占屏幕高度
document.documentElement.clientHeight
 
//自身高度
tag.offsetHeight
 
//距离上级定位高度
tag.offsetTop
 
//父定位标签
tag.offsetParent

//滚动高度
tag.scrollTop
/*
    clientHeight -> 可见区域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域：height + padding + border
    offsetTop    -> 距离上级定位标签的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .back{
            position: fixed;
            right: 20px;
            bottom: 20px;
            cursor: pointer;
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="BodyScroll();">
    <div style="height: 2000px;background-color: #dddddd;"></div>
    <div id="i1" class="back hide" onclick="BackTop();">返回顶部</div>
    <script>
        function BackTop() {
            // 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement
            // 页面没有DTD，即没指定DOCTYPE时，使用document.body
            document.documentElement.scrollTop = 0;
        }
        function BodyScroll() {
            //当前页面可见高度
            var saw_height = document.documentElement.clientHeight;
            //页面滚动高度
            var scroll_height = document.documentElement.scrollTop;
            var tag = document.getElementById('i1');
            if(scroll_height > saw_height){
                tag.classList.remove('hide');
            }else{
                tag.classList.add('hide');
            }
        }
    </script>
</body>
</html>
返回顶部

7、提交表单

document.geElementById('form').submit()

<body>
    <form id="i1">
        <input type="text"/>
        <input type="submit"/>
        <a onclick="SubMit();">提交</a>
    </form>
    <script>
        function SubMit(){
            var t = document.getElementById('i1');
            t.submit();
        }
    </script>
</body>

8、其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框（确定为true，取消为false）
document.write('hello') 输出到页面
document.write('<br>') 页面输出换行 
 
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
 
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

　　

<!--单次定时器-->
<body>
    <div id="i1" style="color: red;"></div>
    <input type="submit" value="删除" onclick="Delete();"/>
    <script>
        function Delete() {
            var tag = document.getElementById('i1');
            tag.innerText = '删除成功';
            setTimeout(function () {
                tag.innerText = '';
            },2000)
        }
    </script>
</body>

四、事件

DOM

对于事件需要注意的要点：

  • this：当前触发事件的标签；

  • event：封装了当前事件的内容；

  • window.onclick：绑定全局事件，即按下任意键就触发；例如：window.onclick=function(){};

  • a标签和submit标签都有默认的绑定事件，如果再绑定一个事件，会先执行新绑定的事件；

  • checkbox和其他标签都不一样，永远先执行默认的绑定事件，即先打对勾，再执行新绑定的自定义事件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="user"/>
        <input type="submit" onclick="return SubmitForm();"/>
    </form>
    <script>
        function SubmitForm() {
            var user = document.getElementById('user');
            if(user.value.length > 0){
                //可以提交
                return true;
            }else{
                //不可以提交
                alert('用户名输入不能为空')
                return false;
            }
        }
    </script>
</body>
</html>
验证输入是否合法 
<html>
<body>
<form id="form">
    <input type="text" id="t1"/>
    <input type="submit" value="点我!"/>
</form>
<script type="text/javascript">
    var ele = document.getElementById("form");
    var text = document.getElementById('t1');
    ele.onsubmit = function (event) {
        if (text.value.length > 0){
            alert(text.value);
            return true;
        }else{
            alert("验证失败 表单不会提交!");
            event.preventDefault();// 阻止表单提交方式一：通知浏览器不要执行与事件关联的默认动作
            //return false; //方式二:返回false表示拦截表单提交.其他为放行
        }
    };
</script>
</body>
</html>

五、实例

1、跑马灯

<!--跑马灯-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #n1{
            display: inline-block;
            background-color: #0a9a13;
            color: white;
            font-size: 100px;
            margin-left: 300px;
        }
    </style>
</head>
<body>
    <div id="n1">
        你好，总理!
    </div>
    <script>
        //每隔一秒执行一次f1函数
        setInterval('f1()',1000);
        function f1() {
            // 获取ID=n1的标签
            var tag = document.getElementById('n1');
            // 获取标签内容
            var text = tag.innerText;
            var a = text.charAt(0); //获取字符串第一个字符
            var sub = text.substring(1,text.length); //获取字符串的第二个到最后一个字符
            var new_str = sub + a;
            tag.innerText = new_str;
        }
    </script>
</body>
</html>

 2、搜索框：请输入关键字

<!--搜索框-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--绑定一个事件，当标签获取焦点时触发函数-->
    <input id="i1" type="text" value="请输入关键字" onfocus="f1();" onblur="f2();"/>
    <input type="button" value="百度一下"/>
    <script>
        function f1() {
            //获取标签，清空关键字
            var tag = document.getElementById('i1');
            if(tag.value == "请输入关键字"){
                tag.value = '';
            }
        }
        function f2() {
            //鼠标移走时，又显示关键字
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.trim().length == 0){
                tag.value = '请输入关键字';
            }
        }
    </script>
</body>
</html>

 3、模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none !important;
        }
        /*遮盖层*/
        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.6);
            z-index: 100;
        }
        /*莫泰对话框，屏幕中央固定*/
        .modal{
            width: 400px;
            height: 300px;
            border: 2px solid orange;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
            z-index: 101;/*对话框在遮盖层上边*/
        }
    </style>
</head>
<body>
    <!--onclick点击触发函数-->
    <div style="height: 2000px;background-color: #dddddd;">
        <input type="button" value="输入" onclick="ShowModal();"/>
    </div>
    <!--遮盖层和对话框默认都不显示-->
    <div id="shade" class="shade hide"></div>
    <div id="modal" class="modal hide">Python从入门到入坟
        <!--a标签什么都不做，点击触发函数，继续隐藏对话框-->
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>
    <script>
        function ShowModal() {
            var t1 = document.getElementById("shade");
            var t2 = document.getElementById("modal");
            //显示对话框
            t1.classList.remove('hide');
            t2.classList.remove('hide');
        }
        function HideModal() {
            var t1 = document.getElementById("shade");
            var t2 = document.getElementById("modal");
            //隐藏对话框
            t1.classList.add('hide');
            t2.classList.add('hide');
        }
        window.onkeydown = function (event) {
            //按下esc键，就隐藏对话框，27为ESC对应的ASC码
            if(event.keyCode == 27){
                HideModal();
            }
        }
    </script>
</body>
</html>
View Code

 4、点赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.css"/>
    <style>
        .item{
            padding: 30px;
            border: 1px solid red;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="item">
        <div style="padding-bottom: 8px;">腹有诗书气自华</div>
        <i class="fa fa-thumbs-up" aria-hidden="true" onclick="CheckClick(this);" style="cursor: pointer"></i>
        <span id="i1">0</span>
    </div>
    <script>
        function CheckClick(ths) {
            var top = 59;
            var left = 48;
            var fontSize = 16;
            var op = 1;
            var obj = document.getElementById('i1');
            // var obj_text = obj.innerText;
            var tag = document.createElement('span');
            tag.style.position = 'absolute';
            tag.style.top = top + 'px';
            tag.style.left = left + 'px';
            tag.style.fontSize = fontSize + 'px';
            tag.style.opacity = op;
            tag.innerText = '+1';
            ths.parentElement.appendChild(tag);
            //定时器
            var interval = setInterval(function () {
                top -= 10;
                left +=10;
                fontSize += 5;
                op -= 0.1;
                tag.style.top = top + 'px';
                tag.style.left = left + 'px';
                tag.style.fontSize = fontSize + 'px';
                tag.style.opacity = op;
                //当透明度为0时，删除定时器和tag
                if(op <= 0){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                    var new_num = parseInt(obj.innerText)+1;
                    obj.innerText = new_num;
                }
            },50);
        }
    </script>
</body>
</html>
点赞

相关推荐