DOM操作及实例操作

Posted 2020-08-05 jl_bai

tags:

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

一.前言

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树

通过可编程的对象模型，javascript 获得了足够的能力来创建动态的 html。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二.查找 HTML 元素

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

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

例;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>

<p class="intro">你好世界!</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
<div>该实例展示了 <b>getElementsByClassName</b> 方法!</div>
<p id="value">该实例展示了  <b>getElementById</b> 方法</p>
<script>
    x=document.getElementsByClassName("intro");
    y=document.getElementsByTagName(\'div\');
    z=document.getElementById("value");
    document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
    document.write(\'<p>文本来自div标签\' + y[0].innerHTML + "</p>");
    document.write(\'<p>文本来自id为value的内容;\' + z.innerHTML + "</p>");
</script>
</body>
</html>

查找HTML元素

2.2间接查找

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

三.操作

1.内容

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

例：

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

更改HTML元素内容

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

更改属性

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

更改输出流

2.属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById(\'n1\').setAttributeNode(atr);
*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全选"  onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="CancelAll();"/>
    <input type="button" value="反选" 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>

Demo

3.class操作

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

例：

<html>
<body id="myid" class="mystyle">

<script type="text/javascript">
    x=document.getElementsByTagName(\'body\')[0];
    document.write("Body CSS class: " + x.className);
    document.write("<br />");
    document.write("An alternate way: ");
    document.write(document.getElementById(\'myid\').className);
</script>

</body>
</html>

获取类名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}
</style>
</head>
<body>

<p>点击按钮为 DIV 元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<div id="myDIV">
我是一个 DIV 元素。
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle");
}
</script>

</body>
</html>

classList.add

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}
.delcss{
    background-color: gray;
    font-size: 40px;
}
</style>
</head>
<body>

<p>点击按钮为 DIV 元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<div id="myDIV">
我是一个 DIV 元素。
</div>
<div id="delcss" class="delcss">
    删除样式
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle");
    document.getElementById("delcss").classList.remove("delcss")
}
</script>

</body>
</html>

删除类

<!DOCTYPE html>
<html lang="en">
<!--弹框-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{display: none}
        .c1{
            position: fixed;
            background: rgba(0,0,0,.6);
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            z-index: 2;
        }
        .c2{
            position: fixed;
            background-color: white;
            height: 300px;
            width: 300px;
            top:50%;
            left:50%;
            margin-top: -150px;
            margin-left: -150px;
            z-index: 3;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点我" onclick="Show();">
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点我" onclick="Show();">
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点我" onclick="Show();">
                </td>
            </tr>
        </table>
    </div>
    <div id="shade" class="c1 hide"></div>
    <div id="modal" class="c2 hide">
        <p>用户：<input type="text"/></p>
        <p>密码：<input type="password"/></p>
        <p>
            <input type="button" value="确定">
            <input type="button" value="取消" onclick="Hide();">
        </p>
    </div>

    <script>
        function Show() {
            document.getElementById("shade").classList.remove(\'hide\');
            document.getElementById("modal").classList.remove(\'hide\');
        }
        function Hide() {
            document.getElementById("shade"使用 JQuery ajax 在 DOM 操作后附加事件
 js中dom基础及操作dom
 jQuery简单介绍及基本用法(选择器&DOM操作)
 JavaScript基础及函数，BOM，DOM的节点及DOM节点操作
 Js操作DOM的方式及获取浏览器的宽高
 DOM操作