• 前端----DOM

    DOM（文档对象模型(Document Object Model)）

    文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作

    1、查找元素

    ①  直接查找

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

    ②  间接查找

    innerText：只获取其中的文本，忽略html的各种标签

    innerHTML：全部内容

    value:

    　　input            value获取当前标签中的值

    　　select 　　　  获取选中的value值(selectedIndex）

    　　Textarea标签 value获取当前标签中的值

    obj=document.getElementById('i1');
<div id=​"i1">​…​</div>​"
        老男孩
        "<a>​google​</a>​</div>​
obj.innerText
"老男孩 google"

obj.innerHTML
"
        老男孩
        <a>google</a>
    "

obj.innerHTML='李杰'
"李杰"

    　　obj.innerText = "<a href='http://www.oldboyedu.com'>老男孩</a>"  只修改字符串
    　　obj.innerHTML = "<a href='http://www.oldboyedu.com'>老男孩</a>" 修改成html标签

    obj=document.getElementById('i2');
<input type=​"text" id=​"i2">​
obj.value   #获取input的用户输入内容
"python"
obj.value='aaa' #修改内容
"aaa"

    <select id="i3">
        <option value="11">北京1</option>
        <option value="12">北京2</option>
        <option value="13">北京3</option>
    </select>

    　　obj=document.getElementById('i3');
    　　<select id=​"i3">​…​</select>​
    　　obj.value
    　　"11"

    　　obj.value='12'

    　　"12"

    搜索使用的默认关键字实例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 600px;margin: 0 auto">
        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字">
    　　　　 <input type="text" placeholder="请输入关键字">  #新版本的浏览器用此参数即可自动实现功能，不用写js

    　　</div> 
    　　<script> 
    　　　　function Focus() { 
    　　　　　　var tag = document.getElementById('i1'); 
    　　　　　　var val = tag.value; 
    　　　　　　if (val = '请输入关键字'){ 
    　　　　　　　　tag.value = ''; 
    　　　　　　} 
    　　　　} 
    　　　　function Blur() { 
    　　　　　　var tag = document.getElementById('i1'); 
    　　　　　　var val = tag.value; 
    　　　　　　if (val.length == 0 ){ 
    　　　　　　　　tag.value = '请输入关键字'; 
    　　　　　　} 
    　　　　} 
    　　</script> 
    </body> 
    </html>

    　　

    　　

    　　

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    parentNode          // 父节点
    childNodes          // 所有子节点
    firstChild          // 第一个子节点
    lastChild           // 最后一个子节点
    nextSibling         // 下一个兄弟节点
    previousSibling     // 上一个兄弟节点
      
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素

    ③  扩展练习

     1、直接查找练习.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    　　　　　　//获取ID
    >document.getElementById('i1');
    < <div id=​"i1">​我是i1​</div>​
    　　　　　　//获取内容
    >document.getElementById('i1').innerText
    <"我是i1"
    　　　　　　//重新赋值
    >document.getElementById('i1').innerText = '新内容'
    <"新内容"
    　　　　　　//获取tagname集合
    >document.getElementsByTagName('a');
    <[<a>​aaaaa​</a>​, <a>​bbbbb​</a>​, <a>​ccccc​</a>​]
    　　　　　　//获取集合指定索引元素
    >document.getElementsByTagName('a')[1]
    < <a>​bbbbb​</a>​
    　　　　　　//对单个元素重新赋值
    >document.getElementsByTagName('a')[1].innerText = 66666;
    <66666
    　　　　　　//对集合中所有文件赋值
    >tags = document.getElementsByTagName('a');
    <[<a>​aaaaa​</a>​, <a>​66666​</a>​, <a>​ccccc​</a>​]
    >for(var i=0;i<tags.length;i++){tags[i].innerText=99999;}
    <99999
    >tags
    <[<a>​99999​</a>​, <a>​99999​</a>​, <a>​99999​</a>​]
     2、间接查找练习.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
        //获取ID
    >tag = document.getElementById('i1');
    < <div id=​"i1">​c2​</div>​
        //获取ID的父项
    >tag.parentElement
    <   <div>​
            <div>​c2Sibling​</div>​
            <div id=​"i1">​c2​</div>​
        </div>​
        //获取父项的子节点
    >tag.parentElement.children
    < [<div>​c2Sibling​</div>​,<div id=​"i1">​c2​</div>​]
        //获取父项的大兄弟
    >tag.parentElement.previousElementSibling
    >   <div>​
        <div>​c1Sibling​</div>​
        <div>​c1​</div>​
        </div>​

    　　

    2、内容操作

    ①  内容

    1
    2
    3
    4
    5
    innerText   文本
    outerText
    innerHTML   HTML内容
    innerHTML 
    value       值

    ②  属性　　

    1
    2
    3
    4
    5
    6
    7
    8
    9
    attributes                // 获取所有标签属性
    setAttribute(key,value)   // 设置标签属性
    getAttribute(key)         // 获取指定标签属性
      
    /*
    var atr = document.createAttribute("class");
    atr.nodeValue="democlass";
    document.getElementById('n1').setAttributeNode(atr);
    */
     Demo

    3、Class操作

    1
    2
    3
    className                // 获取所有类名
    classList.remove(cls)    // 删除指定类
    classList.add(cls)       // 添加类
    		 
    样式操作：
className
classList
    classList.add
    classList.remove
obj.style.fontSize = '16px';
obj.style.backgroundColor='red';
.style.color = 'red'

<style>
    .c1{
        font-size:16px;
        color:red;
        ...

    }
</style>
<div class='c1 c2' style='font=size:16px;background=color'></div>

    4、创建标签，并添加到HTML中：

    标签练习　　

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+">
    <input type="button" onclick="AddEle2();" value="+">
    <div id="i1">
        <p><input type="text" /></p>
        <!--<hr />-->
    </div>
    <script>
        function AddEle1() {
            //创建一个标签
            //将标签添加到id中
            var tag = "<p><input type='text' /></p>";
    　　　　　　　//参数只能是'beforeBegin'、'afterBegin'、‘beforeEnd'、'afterEnd'
            document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
        }
        function AddEle2() {
            var tag = document.createElement('input');
            tag.setAttribute('type','text');
            tag.style.fontSize='16px';
            tag.style.color='red';

            var p = document.createElement('p');
            p.appendChild(tag);  //把input标签放到p标签里面
            document.getElementById('i1').appendChild(p);

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

    5、提交表单

    任何标签通过DOM都可以提交表单

    document.getElementById('f1').submit()

    　　

    简单练习：

     class简单操作.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
            //获取ID
    >document.getElementById('i1');
    < <div id=​"i1">​c2​</div>​
            //赋值变量
    >tag = document.getElementById('i1');
    < <div id=​"i1">​c2​</div>​
            //设置class样式
    >tag.className = 'c1';
    > "c1"
            //设置成功
    >tag
    < <div id=​"i1" class=​"c1">​c2​</div>​
            //修改class样式
    >tag.className = 'c2';
    < "c2"
    >tag
    < <div id=​"i1" class=​"c2">​c2​</div>​
            //获取样式列表
    >tag.classList
    < ["c2"]
            //样式列表集合中添加样式
    >tag.classList.add('c3')
    < undefined
    >tag
    < <div id=​"i1" class=​"c2 c3">​c2​</div>​
            //样式列表集合中删除样式
    >tag.classList.remove('c2');
    < undefined
    >tag
    < <div id=​"i1" class=​"c3">​c2​</div>​

    做完上面例子发现不得了了，我们直接可以对样式进行添加修改了，而且现在就可以做动态模块框了，点击按钮可以触发一系列动态效果，吊炸天了呼~，开搞开搞！！！

    做之前还得了解这个知识点：

    1
    2
    3
    4
    5
    6
    <div onclick="func();">点我</div>
    <script>
         function func() {
                 
          }
    </script>

    上面表示当鼠标点击到div后，执行func()函数

    做个模态对话框：

     模态对话框.html

    页面效果：点击打开后，出现弹出，点击取消，弹出关掉

    再做个选项框吧-全选、反选、取消：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <body>
        <div>
            <table>
                <thead>
                    <tr>
                        <td>选择</td>
                        <td>IP地址</td>
                    </tr>
                </thead>
                <tbody id="tb">
                    <tr>
                        <td><input type="checkbox"/></td>
                        <td>192.168.2.201</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"/></td>
                        <td>192.168.2.202</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"/></td>
                        <td>192.168.2.203</td>
                    </tr>
                </tbody>
            </table>
            <input type="button" value="全选" onclick="ChooseAll();"/>
            <input type="button" value="取消" onclick="CancleAll();"/>
            <input type="button" value="反选" onclick="ReverseAll();"/>
        </div>
        <script>
            function ChooseAll() {
                var tbody = document.getElementById('tb');
                var tr_list = tbody.children;
                for(var i=0;i<tr_list.length;i++){
                    var current_tr = tr_list[i];
                    var checkbox = current_tr.children[0].children[0];
                    checkbox.checked = true
                }
            }
            function CancleAll() {
                var tbody = document.getElementById('tb');
                var tr_list = tbody.children;
                for(var i=0;i<tr_list.length;i++){
                    var current_tr = tr_list[i];
                    var checkbox = current_tr.children[0].children[0];
                    checkbox.checked = false
                }
            }
             function ReverseAll() {
                var tbody = document.getElementById('tb');
                var tr_list = tbody.children;
                for(var i=0;i<tr_list.length;i++){
                    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>

    页面效果：点击全选所有选项框选上；点击取消后恢复；点击反选，只选择未选上的选项框；一个字叼叼叼！！

    根本停不下来，后台管理左侧菜单-点击菜单显示选项，其他菜单关闭

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .item .header{
                height: 35px;
                #2459a2;
                color: white;
                line-height: 35px;
            }
        </style>
    </head>
    <body>
        <div style=" 300px">
            <div class="item">
                <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单一</div>
                <div class="content hide">
                    <div>内容1</div>
                    <div>内容1</div>
                    <div>内容1</div>
                </div>
            </div>
            <div class="item">
                <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单二</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');">菜单三</div>
                <div class="content hide">
                    <div>内容3</div>
                    <div>内容3</div>
                    <div>内容3</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>

    页面效果：点击菜单一、菜单一展开，其他菜单关闭；点击其他菜单亦可

    其他操作：

    console.log();

alert(123);

var v=confirm('真的要删除吗?') v:true false
console.log(v)

location.href  #获取当前的url
localtion.href='url'  #重定向
location.href = location.href <==> location.reload() #刷新

var obj=setInterval(funtion(){    #设置定时器，一直在执行
    console.log(1);
},1000); 
 
clearInterval(obj); #清除定时器

setTimeout(); #指定时间后，定时器只执行一次
例子：
<body>
    <div id="status"></div>
    <input type="button" value="删除" onclick="DeleteEle();">
    <script>
        function DeleteEle() {
            document.getElementById('status').innerText='已删除';
            setTimeout(function () {
                document.getElementById('status').innerText='';
            },5000)
        }
    </script>

</body>
使用方法
var obj=setInterval(function(){
},5000)
clearInterval(obj);

    Dom事件：

    onclick,onblur,onfocus

    老方法实现表格，鼠标移动变色：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="300px">
        <tr onmouseover="t1(0);" onmouseout="t2(0);">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr onmouseover="t1(1);" onmouseout="t2(1)";>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr onmouseover="t1(2);" onmouseout="t2(2)";>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <script>
        function t1(n) {
            var myTrs = document.getElementsByTagName('tr')[n];
            console.log(myTrs);
            myTrs.style.backgroundColor = "red";
        }
        function t2(n) {
            var myTrs = document.getElementsByTagName('tr')[n];
            myTrs.style.backgroundColor = "";
        }
    </script>
</body>
</html>

    新方法实现：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="300px">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        var myTrs=document.getElementsByTagName('tr');
        var len = myTrs.length;
        for(var i=0;i<len;i++){
            myTrs[i].onmouseover = function () {
                this.style.backgroundColor = 'red';
            }
            myTrs[i].onmouseout = function () {
                this.style.backgroundColor = '';
            }
        }
    </script>
</body>
</html>

    绑定事件两种方式：

    a.直接标签绑定 onclick='xxx()' onfocus

    b.先获取Dom对象，然后进行绑定

    　

    　document.getElementById('xx').onclick

　document.getElementById('xx').onfocus

    this,当前触发事件的标签

    a.第一种绑定方式

    <input id='i1' type='button' onclick='ClickOn(this)'>　

    function ClickOn(self){

    　　//self 当前点击的标签

    }

    b.第二种绑定方式

    <input id='i1' type='button' onclick='ClickOn(this)'>

    document.getElementById('i1').onclick=funtion(){

    　　//this 代指当前点击的标签

    }　

    c.

    事件列表：

    语法分析：

    可参考银角大王http://www.cnblogs.com/wupeiqi/articles/5643298.html

    　　
  • 相关阅读:
    WPF 重新启动该程序
    Winform水印
    PS 切HTML （ps+div+css）
    VS服务器运行有问题 怎么办？
    ISDeleted 软删除！！
    项目初始框架
    MD5加密
    ！！LoginWindow．ｃｓ
    ！！！精简版三层架构
    ！！C#交互操作SqlServer数据库 基本的增删改查
  • 原文地址：https://www.cnblogs.com/ld1977/p/6557515.html
Copyright © 2020-2023  润新知