JavaScript HTML DOM 对象（上）

最新推荐文章于 2023-03-31 10:29:24 发布

凌_风

最新推荐文章于 2023-03-31 10:29:24 发布

阅读量1.4k

点赞数

分类专栏： WEB前端文章标签： javascript html dom

本文链接：https://blog.csdn.net/fgf00/article/details/53193752

版权

WEB前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Dom：document。相当于把所有的html文件，转换成了文档对象。

之前说过：html-裸体的人；css-穿上衣服；js-让人动起来。
让人动起来，就得先找到他，再修改它内容或属性。

找到标签
操作标签

一、查找元素

1、直接查找

document.getElementById('i1')           根据ID获取一个元素
document.getElementsByTagName('div')    根据标签名获取标签集合
document.getElementsByClassName('div')  获取class多个元素(列表)
document.getElementsByName              获取name多个元素(列表)

查找操作练习

<body>
    <div id="1">我是FGF</div>
    <a>FFFFFFFFF</a>
    <a>27272727272</a>
    <a>gggggggggggg</a>
</body>

> document.getElementById('1')
<div id="1">我是FGF</div>
> document.getElementById('1').innerText
"我是FGF"
> document.getElementById('1').innerText = '新内容'
"新内容"
> document.getElementsByTagName('a')
[a, a, a]0: aaccessKey: ""assignedSlot: nullattributes: NamedNodeMapbaseURI: "http://localhost:……"
> document.getElementsByTagName('a')[1]
<a>27272727272</a>
> document.getElementsByTagName('a')[1].innerText = 666
666
> tags = document.getElementsByTagName('a')
[a, a, a]
> for(var i=0;i<tags.length;i++){tags[i].innerText=777;}
777

2、间接查找

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

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

二、操作标签

1、内容操作

标签.innerText        获取标签中的文本内容
标签.innerText = ""   对标签内部文本进行重新复制
outerText
innerHTML             HTML内容
innerHTML  
value                 值

2、样式操作

className
    tag.className='c1'            直接整体做操作
    tag.classList.add('c2')       添加指定样式
    tag.classList.remove('c2')    删除指定样式

PS：onclick点击操作
    <div onclick='func();'>点我</div>
    <script>
        function func(){
        }
    </script>

三、示例

1、示例之模态对话框（弹出框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
    </div>
    <!--遮罩层开始-->
    <div id="i1" class="c1 hide" ></div>
    <!--遮罩层结束-->
    <!--弹出框（模态框）开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();" />
            <input type="button" value="确定" onclick="HideModel();" />
        </p>
    </div>
    <!--弹出框（模态框）结束-->
    <script>
        function ShowModel(){
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideModel(){
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
    </script>
</body>
</html>

2、示例之全选和反选以及取消

checkbox  
    获取值
    checkbox对象.checked
    设置值
    checkbox对象.checked = true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"f id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->
    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定"/>
        </p>
    </div>
    <!-- 弹出框结束 -->

    <script>
        function ShowModel(){
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideModel(){
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }

        function ChooseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }
        }

        function CancleAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }

        function ReverseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

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

3、示例之后台管理左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px"></div>
    <div style="width: 300px">
        <div class="item">
            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>

    <script>
        function ChangeMenu(nid){
            var current_header = document.getElementById(nid);
            var item_list = current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }
            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>

转载请务必保留此出处：http://blog.csdn.net/fgf00/article/details/53193752

凌_风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript HTML DOM 对象（上）

Dom：document。相当于把所有的html文件，转换成了文档对象。之前说过：html-裸体的人；css-穿上衣服；js-让人动起来。让人动起来，就得先找到他，再修改它内容或属性。找到标签操作标签一、查找元素1、直接查找document.getElementById('i1') 根据ID获取一个元素document.getElementsByTagName('di
复制链接

扫一扫