4.DOM

定义

文档对象模型（Document Object Model）是一种用于HTML和XML文档的编程接口。

查找元素

1.直接查找

document.getElementById             根据ID获取一个标签

document.getElementsByName          根据name属性获取标签集合

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

练习：

<div id="i1">床前明月光，疑是地上霜</div>

    <a>111</a>

    <a>222</a>

    <a>333</a>

//获取ID

document.getElementById('i1')

//获取内容

document.getElementById('i1').innerText

//内容重新赋值

document.getElementById('i1').innerText = '举头望明月，低头思故乡'

//获取TagName（'a'）集合

document.getElementsByTagName('a')

//获取集合指定索引元素

document.getElementsByTagName('a')[1]

//对单个元素重新赋值

document.getElementsByTagName('a')[1].innerText = 666

2.间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

练习：

<div>

            <div>c1Sibling</div>

            <div>c1</div>

        </div>

        <div>

            <div>c2Sibling</div>

            <div id="i1">c2</div>

        </div>

        <div>

            <div>c3Sibling</div>

            <div>c3</div>

        </div>

 //获取ID

tag = document.getElementById('i1');

//获取ID的父亲

tag.parentElement

<div>

            <div>c2Sibling</div>

            <div id="i1">c2</div>

 </div>

//获取父亲的上一个兄弟

tag.parentElement.previousElementSibling

<div>

            <div>c1Sibling</div>

            <div>c1</div>

</div>

//获取父亲的上一个兄弟的第一个儿子

tag.parentElement.previousElementSibling.firstElementChild

<div>c1Sibling</div>

内容操作

（1）内容

innerText   文本

innerHTML   HTML内容(包括元素、注释和文本节点)
value       获取input/select/textarea里面输入的内容

（2）属性

attributes           获取所有标签属性

getAttribute()       获取指定标签属性

setAttribute()       设置指定标签属

removeAttribute()    移除指定标签属

class操作

对所有样式操作
className                  // 获取所有类名

classList.remove(class)    // 删除指定类

classList.add(class)       // 添加类

对单个样式操作
obj.style.fontSize='16px'
obj.style.backgroundColor='red'

事件

onmousecover    鼠标移到某元素之上

onmouseout      鼠标从某元素离开

onfocus         元素获得聚焦

onblur          元素失去焦点

实例

1.模态框（添加，全选，取消，反选）

功能：

（1）点击添加 -->弹出框输入内容-->点取消后，弹出框关闭

（2）全选，取消，反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opscity:0.6;

        }

        .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="CancelAll()">

        <input type="button" value="反选" onclick="ReverseAll()">

        <table>

            <thread>

                <tr>

                    <th>选择</th>

                    <th>主机名</th>

                    <th>端口</th>

                </tr>

            </thread>

            <tbody id="tb">

                <tr>

                    <td>

                        <input type="checkbox">

                    </td>

                    <td>1.1.1.1</td>

                    <td>190</td>

                </tr>

                <tr>

                    <td><input type="checkbox"></td>

                    <td>1.1.1.2</td>

                    <td>192</td>

                </tr>

                <tr>

                    <td><input type="checkbox"></td>

                    <td>1.1.1.3</td>

                    <td>194</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');

            var tr_list = tbody.children;

            for(var i = 0;i < tr_list.length;i += 1){

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = true;

            }

        }

        function CancelAll() {

            var tbody = document.getElementById('tb');

            var tr_list = tbody.children;

            for(var i = 0;i < tr_list.length;i += 1){

                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 += 1){

                //循环所有的tr

                var current_tr = tr_list[i];

                //获取<input type="checkbox">

                var checkbox = current_tr.children[0].children[0];

                if(checkbox.checked){

                    checkbox.checked = false;

                }else{

                    checkbox.checked = true;

                }

            }

        }

    </script>

</body>

</html>

2.后台管理页面布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            margin: 0;

        }

        .left{

            float: left;

        }

        .pg-header{

            height: 48px;

            background-color: #2459a2;

            color:white;

            line-height: 48px;

        }

        .pg-header .logo{

            width:200px;

            background-color: cadetblue;

            text-align: center;

        }

        .pg-header .user{

            margin-right: 60px;

            padding: 0 20px;

            color: white;

            height: 48px;

            position: relative;

        }

        .pg-header .user:hover{

            background-color: #204982;

        }

        .pg-header .user .a img{

            height: 40px;

            width: 40px;

            margin-top: 4px;

            border-radius: 50%;

        }

        .pg-header .user .b{

            z-index: 20;

            position: absolute;

            top: 48px;

            right: 44px;

            background-color: white;

            color: black;

            width: 80px;

            display: none;

        }

        .pg-header .user:hover .b{

            display: block;

        }

        .pg-header .user .b a{

            display: block;

        }

        .right{

            float:right

        }

        .pg-content .menu{

            position:fixed;

            top:48px;

            left: 0;

            bottom: 0;

            right: 0;

            width: 200px;

            background-color: #dddddd;

        }

        .pg-content .content{

            position:fixed;

            top:48px;

            left: 200px;

            bottom: 0;

            right: 0;

            z-index: 9;

            background-color: purple;

            overflow: auto;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="logo left">logo</div>

        <div class="user right">

            <a class="a img">登陆</a>

            <div class="b">

                <a>我的资料</a>

                <a>注销</a>

            </div>

        </div>

    </div>

    <div class="pg-content">

        <div class="menu left">目录</div>

        <div class="content left">内容</div>

    </div>

</body>

</html>

3.鼠标焦点

onfocus 获得焦点

onblur 失去焦点

<!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="请输入关键字" />

    </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>

4.创建标签

点“添加” 可以创建text输入框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="xxx()" value="添加">

    <div id="i1">

        <p><input type="text"></p>

    </div>

    <script>

        function xxx() {

             //创建标签

            //将标签添加到i1里面

            var tag=document.createElement("input");

            //添加属性

            tag.setAttribute("type","text");

            //设置样式

            tag.style.fontSize="16px";

            tag.style.border="1px solid red";

            var p=document.createElement("p");

            //把tag放到p里面

            p.append(tag);

            document.getElementById('i1').appendChild(p)

        }

    </script>

</body>

</html>

5.鼠标高亮显示

<!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');

        for(var i=0; i < myTrs.length; i++){

            myTrs[i].onmousemove = function(){

                this.style.backgroundColor='red';

            }

            myTrs[i].onmouseout = function(){

                this.style.backgroundColor=""

            }

        }

    </script>

</body>

</html>

4.DOM的更多相关文章

关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素二.修改DOM引起的重绘重排一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
重撸js_2_基础dom操作
1.node 方法返回含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
虚拟dom与diff算法分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析全面理解虚拟DOM,实现虚拟DOM
窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么在之前,React和Em ...
jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作看 ...

随机推荐

开发中常用的JS知识点集锦
索引 1.对象深拷贝 2.网络图片转base64, 在线图片点击下载 3.常用CSS样式记录(超出宽高省略展示/播放icon/按钮背景颜色渐变...) 4.对象深拷贝 5.对象深拷贝 6.对象深拷贝 ...
react-native自定义TextInput光标颜色
<TextInput defaultValue="Highlight Color is red" selectionColor={'red'} style={styles.s ...
P2733 家的范围 Home on the Range-弱DP
P2733 家的范围 Home on the Range 思路 :转化为以每个点为右下角的最大正方形的边长 #include<bits/stdc++.h> using namespace ...
hdu1201 java
题意: 求某人从出生到18岁生日所经过的天数.如果这个人没有18岁生日,就输出-1. 思路: 通过毫秒值计算天数. 利用:来自https://www.cnblogs.com/xiohao/p/5294 ...
js常会问的问题：找出字符串中出现次数最多的字符。
一.循环obj let testStr = 'asdasddsfdsfadsfdghdadsdfdgdasd'; function getMax(str) { let obj = {}; for(le ...
蛤？你要用html做游戏？(笔记版)
标签(空格分隔):canvas html game 本书是看<html5 Canvas游戏开发实战>(2013)笔记博主小白,啥也不懂类型,这只是一个笔记,需要的话可以看原书. 书张这样 ...
js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
通配符的匹配很全面, 但无法找到元素 'context:property-placeholder' 的声明。
在Spring相应包导入正确的前提下,出现这个异常,是因为我们在引入命名空间的时候,没有正确引入它的DTD解析文件,以上面的context为例,解决办法如下: 在引入 xmlns:context=&q ...
Katalon Studio之接口测试中token处理
前言最近抽时间接触了一下Katalon Studio(后面简称KS),并且利用KS做了一些接口测试的试验,感觉还不错,不过其中接口授权中缺少通过token动态验证的方案,虽然KS支持Authoriz ...
Xtrabackup实现Mysql的InnoDB引擎热备份
前面Zabbix使用的数据库是mysql,数据库备份不用多说,必须滴,由于使用的是innodb引擎,既然做,那就使用第三方强大的Xtrabackup工具来热备吧,Xtrabackup的说明,参见htt ...

4.DOM

定义

查找元素

1.直接查找

2.间接查找

内容操作

（1）内容

（2）属性

class操作

事件

实例

1.模态框（添加，全选，取消，反选）

2.后台管理页面布局

3.鼠标焦点

4.创建标签

5.鼠标高亮显示

4.DOM的更多相关文章

随机推荐

热门专题