DOM

首页 > 代码库 > DOM

2024-08-10 22:03:54 217人阅读

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

一、查找元素

1、直接查找

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

2、间接查找

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

实现输入框提示，点击清空

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <input id="i1" type="text" value="http://www.mamicode.com/请输入关键字" onfocus="Focus();" onblur="Blur();" />    <input id="i2" type="text"/>    <script type="text/javascript">        function Focus(){            //console.log(‘Focus‘);            //获取标签，清空            var  tag = document.getElementById(‘i1‘);            if(tag.value =http://www.mamicode.com/="请输入关键字"){                tag.valuehttp://www.mamicode.com/= "";            }        }        function Blur(){            //console.log(‘blur‘);            var  tag = document.getElementById(‘i1‘);            var val = tag.value;            if(val.trim().length == 0){                tag.valuehttp://www.mamicode.com/= "请输入关键字";            }        }    </script></body></html>

实现效果

技术分享

二、操作

1、内容

innerText   文本outerTextinnerHTML   HTML内容innerHTML  value       值

2、属性

attributes // 获取所有标签属性

sss

setAttribute(key,value) // 设置标签属性

getAttribute(key) // 获取指定标签属性

/*

var atr = document.createAttribute("class");

atr.nodeValue="http://www.mamicode.com/democlass";

document.getElementById(‘n1‘).setAttributeNode(atr);

*/

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <input type="button" value="http://www.mamicode.com/全选"  onclick="CheckAll();"/>    <input type="button" value="http://www.mamicode.com/取消" onclick="CancelAll();"/>    <input type="button" value="http://www.mamicode.com/反选" onclick="ReverseCheck();"/>    <table border="1" >        <thead>        </thead>        <tbody id="tb">            <tr>                <td><input type="checkbox" /></td>                <td>111</td>                <td>222</td>            </tr>            <tr>                <td><input type="checkbox" /></td>                <td>111</td>                <td>222</td>            </tr>            <tr>                <td><input type="checkbox" /></td>                <td>111</td>                <td>222</td>            </tr>            <tr>                <td><input type="checkbox" /></td>                <td>111</td>                <td>222</td>            </tr>        </tbody>    </table>    <script>        function CheckAll(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 = 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></body></html>

　　实现效果

技术分享

className // 获取所有类名

classList.remove(cls) // 删除指定类

classList.add(cls) // 添加类

4、标签操作

a.创建标签

// 方式一

var tag = document.createElement(‘a‘)

tag.innerText = "wupeiqi"

tag.className = "c1"

tag.href =http://www.mamicode.com/ "http://www.cnblogs.com/wupeiqi"

// 方式二

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

b.操作标签

// 方式一

var obj = "<input type=‘text‘ />";

xxx.insertAdjacentHTML("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])

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>        .item{            padding: 50px;            position: relative;        }    </style></head><body>    <div class="item">        <a onclick="Favor(this);">赞1</a>    </div>    <div class="item">        <a onclick="Favor(this);">赞2</a>    </div>    <div class="item">        <a onclick="Favor(this);">赞3</a>    </div>    <div class="item">        <a onclick="Favor(this);">赞4</a>    </div>    <script>        function Favor(ths){            // ths => this => 当前触发事件的标签            var top = 49;            var left = 71;            var op = 1;            var fontSize = 18;            var tag = document.createElement(‘span‘);            tag.innerText = ‘+1‘;            tag.style.position = ‘absolute‘;            tag.style.top = top + "px";            tag.style.left = left + "px";            tag.style.opacity = op;            tag.style.fontSize = fontSize + ‘px‘;            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.opacity = op;                tag.style.fontSize = fontSize + ‘px‘;                if(op <= 0.2){                    clearInterval(interval);                    ths.parentElement.removeChild(tag);                }            }, 50);        }    </script></body></html>

实现效果：

技术分享

7、提交表单

document.geElementById(‘form‘).submit()

8、其他操作

console.log 输出框

alert 弹出框

confirm 确认框

// URL和刷新

location.href 获取URL

location.href =http://www.mamicode.com/ "url" 重定向

location.reload() 重新加载

// 定时器

setInterval 多次定时器

clearInterval 清除多次定时器

setTimeout 单次定时器

clearTimeout 清除单次定时器

定时器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <div id="status" style="color: red;">    </div>    <input type="submit" onclick="DeleteStatus();" value="删除" />    <script>        function DeleteStatus(){            var s = document.getElementById(‘status‘);            s.innerText = ‘删除成功‘;            setTimeout(function(){                s.innerText = "";            },5000);        }    </script></body></html>