JavaScript进阶之DOM

Posted 2020-08-03 FuZZ

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript进阶之DOM相关的知识，希望对你有一定的参考价值。

文档对象模型DOM

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

一、查找元素

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</title>
</head>
<body>
<p id="p1">测
    <span>99999</span>
    试</p>
<script>
    var t = document.getElementById(\'p1\')
    var t1 = t.childNodes;
    var t2 = t.children;
    console.log(t1);
    console.log(t2);
</script>
</body>
</html>

效果：

二、操作元素

1.内容

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
value 获取input标签的值

innerHTML、outerHTML、innerText、outerText区别：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>
    <script language="JavaScript" type="text/javascript"> 
　　//.innerHTML
　　function innerHTMLDemo()
　　{ 
　　　test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>"; 
　　} 
　　//.innerText
　　function innerTextDemo()
　　{ 
　　　test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>"; 
　　} 
　　//.outerHTML
　　function outerHTMLDemo()
　　{ 
　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　}
　　//.outerText
　　function outerTextDemo()
　　{ 
　　　test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>"; 
　　}
　　</script> 
　　</head> 
　　<body> 
　　<ul> 
　　<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li> 
　　<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li> 
　　<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li> 
　　<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li> 
　　</ul> 
　　</body> 
　　</html>

结果：
请复制代码到此，提交查看：
http://www.w3school.com.cn/tiy/t.asp?f=html_basic

不同之处:　
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。
　　
　　
value实例：
利用value，搜索框默认显示请输入关键字，当鼠标点击进去之后，删除请输入关键字，当鼠标点击其他地方之后，如果搜索框有内容，则显示输入的内容，没有则继续显示请输入关键字

代码：
　　

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <input id="i1" type="text" value="请输入关键字"  onfocus="Foncs()" onblur="Blur()"/>

    <script type="text/javascript">
        function Foncs() {
            var tag = document.getElementById(\'i1\');
            if (tag.value == "请输入关键字") {
                tag.value = \'\';
            }
        }
        function Blur() {
            var tag = document.getElementById(\'i1\');
            var val = tag.value;
            if (val.trim().length == 0) {
                tag.value = "请输入关键字";
            }

        }
        
    </script>

</body>
</html>

结果：
请复制代码到此，提交查看：
http://www.w3school.com.cn/tiy/t.asp?f=html_basic　　
　　
　　

2.属性

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

全选、反选、取消示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="button" value="全选" onclick="ChoiceALL()"/>
<input type="button" value="取消" onclick="CancleALL()"/>
<input type="button" value="反选" onclick="ReversALL()"/>
<table border="1">
    <thead>
        <tr>
            <td>序号</td>
            <td>用户</td>
            <td>密码</td>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>
                张三
            </td>
            <td>
                123
            </td>
        </tr>

            <td>
                <input type="checkbox" />
            </td>
            <td>
                张三
            </td>
            <td>
                123
            </td>
        </tr>

            <td>
                <input type="checkbox" />
            </td>
            <td>
                张三
            </td>
            <td>
                123
            </td>
        </tr>
    </tbody>

</table>
<script type="text/javascript">
    function ChoiceALL() {
        var tb = document.getElementById(\'tb\');
        var trs = tb.children;
        for (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 CancleALL() {
        var tb = document.getElementById(\'tb\');
        var trs = tb.children;
        for (i=0;i<trs.length;i++) {
            var current_tr = trs[i];
            var ck = current_tr.firstElementChild.firstElementChild;
//            ck.removeAttribute(\'checked\');
            ck.checked = false;
        }

    }

    function ReversALL() {
        var tb = document.getElementById(\'tb\');
        var trs = tb.children;
        for (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) // 添加类

通过对class类的增删，实现对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
        .hide{
            display: none !important;
        }
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            /*background-color: black;*/
            /*opacity: 0.6;*/
            background-color: rgba(0,0,0,.6);
            z-index: 1000;
        }
        .modal{
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 1001;
        }
    </style>

    <div style="height: 500px ;width: 100%">
        <input type="button" value="点我"  onclick="showhide()"/>
    </div>
    <div id="d1" class="shade hide"></div>
    <div id="d2" class="modal hide">
        <a href="javascript:void(0)" onclick="undisplayhide()">取消</a>
    </div>

    <script type="text/javascript">
        function showhide() {
            var d1 = document.getElementById(\'d1\');
            var d2 = document.getElementById(\'d2\');
            d1.classList.remove(\'hide\');
            d2.classList.remove(\'hide\');

        }
        function undisplayhide() {
            var d1 = document.getElementById(\'d1\');
            var d2 = document.getElementById(\'d2\');
            d1.classList.add(\'hide\');
            d2.classList.add(\'hide\');

        }
    </script>
</body>
</html>

4.标签

创建标签

方式1：使用对象创建标签，并添加对应的属性

var tag = document.createElement(\'a\')    创建a标签
tag.innerText = "fuzj"      添加a标签中文本内容
tag.className = "c1"            给a标签应用class c1的样式
tag.href = "http://www.cnblogs.com/pycode"  给a标签添加href属性

方式2：采用字符串的形式，将标签和属性作为字符串

var tag = "<a class=\'c1\' href=\'http://www.cnblogs.com/pycode\'>fuzj</a>"

操作标签

对象创建方式操作

var d = document.getElementById(\'d\')   //获取要插入的标签
    d.insertAdjacentElement(\'beforeEnd\',tag)

字符串形势操作

var d = document.getElementById(\'d\');   //获取要插入的标签
    d.insertAdjacentHTML(\'beforeEnd\',tag);

插入的位置说明：

beforeBegin 在本标签前面添加
afterBegin 在本标签的子标签前面添加
beforeEnd 在本标签的子标签后面添加
afterEnd 在本标签后面添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<div id="d">
    <p>p标签1</p>
    <p>p标签2</p>
</div>
<script>

    var tag1 = "<span>beforeEnd</span>";
    var tag2 = "<span>afterEnd</span>";
    var tag3 = "<span>beforeBegin</span>";
    var tag4 = "<span>afterBegin</span>";
    var d = document.getElementById(\'d\');   //获取要插入的标签
    d.insertAdjacentHTML(\'beforeEnd\',tag1);
    d.insertAdjacentHTML(\'afterEnd\',tag2);
    d.insertAdjacentHTML(\'beforeBegin\',tag3);
    d.insertAdjacentHTML(\'afterBegin\',tag4);


</script>

</body>
</html>

补充：
还有一种方式添加标签

appendChild 添加到指定子节点
insertBefore 在现有的子节点前插入一个新的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<div id="d">
    <p>p标签1</p>
    <p>p标签2</p>
</div>
<script>

    var tag1 = document.createElement(\'span\');
    var tag2 = document.createElement(\'span\');
    tag1.innerText = \'appendChild\';
    tag2.innerText = \'insertBefore\';
    var d = document.getElementById(\'d\');   //获取要插入的标签

    d.appendChild(tag1);
    d.insertBefore(tag2,d.childNodes[0]);    //d.choildNodes获取d的所有子节点

</script>

</body>
</html>

5.样式操作

dom对样式操作直接在节点对象后面加.style.对应的样式，注意，类似font-size 变为fontSize，没有了－

var obj = document.getElementById(\'i1\')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

点赞案例：通过循环动态修改样式，实现点赞＋1的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .iterm {
            padding: 50px;
            position: relative;
        }
    </style>
</head>
<body>

<div>
    <div class="iterm">
        <a onclick="zan(this)">赞1</a>
    </div>
    <div class="iterm">
        <a onclick="zan(this)">赞2</a>
    </div>
    <div class="iterm">
        <a onclick="zan(this)">赞3</a>
    </div>
    <div class="iterm">
        <a onclick="zan(this)">赞4</a>
    </div>
</div>

<script type="text/javascript">
    function zan(ths) {
        var top = 50;
        var left = 70;
        var op = 1;
        JavaScript进阶之DOM
 JavaScript进阶之DOM
 JavaScript进阶之DOM
 JavaScript进阶之DOM
 JavaScript进阶之DOM
 JavaScript进阶之DOM