您的位置: 首页  >  文章  >  前端----DOM

前端----DOM

分类: 文章 • 2023-10-13 11:30:58

前端----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="width: 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  // 上一个兄弟标签元素

③  扩展练习

前端----DOM 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>​]
前端----DOM 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);
*/
前端----DOM 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()

　　

简单练习：

前端----DOM 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()函数

做个模态对话框：

前端----DOM 模态对话框.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="width: 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.

 

 

 

事件列表：

前端----DOM

 

语法分析：

 

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

　　

posted @ 2017-03-16 00:05 ld1977 阅读(...) 评论(...) 编辑 收藏

相关推荐