Day045--DOM操作

一. 操作DOM的三步走

    - 获取事件源 (找开关)
    - 事件(点一下)
    - 处理程序(业务逻辑)(灯亮了)

二. 获取DOM的三种方式
    console.log(window); // 查看window下的所有属性,函数
    console.dir(document);  // 打印document中的所有属性
    console.log(document.documentElement); //html中的所有内容
    console.log(document.body); //body中的所有内容
    1. 通过id获取
    document.getElementById('id') 获取id为XX的一个对象
    2. 通过标签获取
    document.getElementsByTagName('tag')  获取标签为XX的多个对象,伪数组. 遍历通过 for (var i; i<obj.length ; i++){ obj[i]}
    3. 通过类名获取
    document.getElementsByClassName('class') 获取类名为XX的多个对象

    救命稻草:
    document.querySelector("CSS所学的选择器")   直接放css选择器,获取的是单个DOM对象
    document.querySelectorAll("CSS所学的选择器")   获取多个DOM对象, NoteList对象,[0]切片拿元素. 遍历可以用forEach()

    querySelector 查询选择器
    获取文档中 class=”example” 的第一个 <p> 元素:
    document.querySelector("p.example");
    获取文档中有 “target” 属性的第一个 <a> 元素：
    document.querySelector("a[target]");

    querySelectorAll
    该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样.
    document.querySelectorAll("p.example") 返回所有带有example类样式的p

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="box" id="box">

        你好

        <p>alex</p>

    </div>

    <p class="box">吴老板</p>

    <script type="text/javascript">

        console.log(window);

        console.dir(document);  // 打印document中的所有属性

        console.log(document.documentElement); //html中的所有内容

        console.log(document.body); //body中的所有内容

        // 1. 通过id获取

        var oDiv = document.getElementById('box');

        console.log(oDiv); // 打印div对象

        // 2. 通过标签获取,获取的是伪数组,多个DOM对象

        var oTag1 = document.getElementsByTagName('div');

        console.log(oTag1);  // HTMLCollection [div#box.box, box: div#box.box]   伪数组

        var oTag = document.getElementsByTagName('div')[0]; //HTMLCollection 伪数组 有数组的索引和length,但是没有数组的方法

        console.log(oTag);

        oTag.style.color = 'red';

        // 3. 通过类名获取, 获取的也是伪数组,多个DOM对象

        var oClass = document.getElementsByClassName('box');

        console.log(oClass);

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

            // 样式设置

            oClass[i].style.backgroundColor = 'orange';

        }

        // 救命稻草

        var oD = document.querySelectorAll('div p');

        console.log(oD);

        oD.forEach(function (item, index) {

            console.log(item);

            item.style.color = 'yellow'

        })

    </script>

</body>

</html>


 二. js中的事件
        常见事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        /*窗口加载  1.先去加载文档 2.图片再去加载*/

        window.onload = function () {

            console.log(document);

            console.log(document.getElementById('btn'));

            document.getElementById('btn').onclick = function () {

                alert(1)

            };

            document.getElementById('btn').onmouseover = function () {

              console.log('鼠标悬停了')

            };

            // onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。

            // document.getElementById('btn').onmouseenter = function(){

            //

            // }

            document.getElementById('btn').onmouseout = function () {

                console.log('鼠标离开了')

            };

        }

    </script>

</head>

<body>

<button id="btn">点我</button>

<img src="" alt="">

</body>

</html>


        重点:
        onclick 单击事件
        onmouseover 鼠标悬停,鼠标穿过被选元素和被选元素的子元素都会触发事件
        onmouseout 鼠标移出
　　　　 onmouseenter  鼠标穿过被选元素会触发事件

        onload
        如果script在head标签中加载 ,使用window.onload()
        窗口加载需要 1 等待文档加载完成 2,等待图片再去加载.

三. 处理程序(处理DOM对象+DCMAScript)
　　1. 值的操作

document.write('既可以放文本又可以放标签+文本');

//闭合标签设置文本的内容 <p></p>

oP.innerText //获取值

oP.innerText = 'alex' //设置值

//设置html+文本内容

oP.innerHTML //获取值

oP.innerHTML = '<p>哈哈哈</p>'; //虽然可以写入 但是注意标签嵌套

　　2. 标签属性的操作

//获取标签属性的值

oDiv.getAttribute('class');

//设置标签属性的值

oDiv.setAttribute(key,value);

oDiv.setAttribute('class','active');

//不仅我们可以使用标签自带的属性,

//什么是最好的?

自定义

　　3. 对象属性的操作

oDiv.id

oDiv.className

oDiv.title

oImg.src //如果通过对象属性获取是绝对路径 对象的属性值

oImg.alt

oAnchor.href

oAnchor.target  // _self 在本窗口打开   -blank 在新窗口打开

oRadio.checked //如果选中,通过对象属性获取的值是 true

　　4. CSS样式属性操作

oDiv.style.xxxx = 'oooo';
// 注意:带-的属性要用驼峰

//设置标签样式之后,他们的css都是行内样式,优先级最高

　　5. 显示隐藏的两种方式

1.可以通过控制css的style样式 对指定的DOM对象 设置属性 display:none|block;

2.通过控制className,来对元素显示隐藏,判断该标签是否由class='active',如果有active表示显示,没有active表示隐


 获取标签的内容值& 对表单控件value的操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="box">

        wusir

        <p>alex</p>

    </div>

    <input type="text" value="" id="user">

    <script>

        var oDiv = document.getElementById('box');

        // oDiv.innerText = '<h1>哈哈哈哈</h1>';   //只设置文本

        // oDiv.innerHTML = '嘿嘿嘿';

        // oDiv.innerHTML = '<h2>嘿嘿嘿</h2>';  //既可以设置文本也可以设置标签

        //只获取所有(当前标签和子标签)文本内容

        console.log(oDiv.innerText);

        //获取父标签中所有的标签元素 (子标签,空格,换行,文本)

        console.log(oDiv.innerHTML);

        //设置value值  只适用于表单控件元素

        document.getElementById('user').value = '你好啊';

        console.log(document.getElementById('user').value);

    </script>

</body>

</html>


img标签设置src属性来设置图片内容,a标签设置href属性来设置超链接的内容

 对标签的css操作(样式操作)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

<div class="box"></div>

<script>

    var oDiv = document.getElementsByClassName('box')[0];

    var isRed = true;

    oDiv.onclick = function () {

        if (isRed){

            this.style.backgroundColor = 'yellow';

            isRed = false;

        } else{

            this.style.backgroundColor = 'red';

            isRed = true;

        }

    }

</script>

</body>

</html>


 对标签属性的操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            background-color: red;

        }

        #box{

            background-color: yellow;

        }

        .active{

            display: none;

        }

    </style>

</head>

<body>

    <button id="btn">隐藏</button>

    <div class="box"></div>

    <script>

        var oDiv = document.getElementsByClassName('box')[0];

        var oBtn = document.getElementById('btn');

        var isShow = true;

        oBtn.onclick = function () {

            if (isShow){

                // 对标签的id赋值

                // oDiv.id = 'box';

                // oDiv.title = '哈哈哈';

                // console.log(oDiv.className); //box

                //设置类名的时候 一定要用className 因为class是个关键字

                oDiv.className = 'active';

                oBtn.innerText = '显示';

                isShow = false;

            }else{

                // oDiv.id = '';

                oDiv.className = 'box';

                oBtn.innerText = '隐藏';

                isShow = true;

            }

        };

    </script>

</body>

</html>


 对img标签属性的操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*重置样式*/

        *{

            padding: 0;

            margin: 0;

        }

        .swiper{

            width: 1226px;

            height: 460px;

            margin: 0 auto;

            background-color: red;

            position: relative;

        }

        .swiper span{

            position: absolute;

            right: 0;

            top: 195.5px;

            width: 41px;

            height: 69px;

            background: green url("./icon-slides.png") no-repeat -125px ;

        }

    </style>

</head>

<body>

    <div class="swiper">

        <span id="next"></span>

        <img src="./1.png" alt="" id="left">

    </div>

    <script>

        var oImg = document.getElementById('left');

        console.dir(oImg);

        var oNext = document.getElementById('next');

        oImg.onmouseover = function () {

            //this.src 获取的是DOM对象的属性

            console.log(this.src); //绝对路径

            //获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性

            console.log(this.getAttribute('src')); // 里面写的什么就显示什么

            this.src = '1_hover.png';

            this.alt = '哈哈哈';

        }

        oImg.onmouseout = function () {

            this.src = '1.png'

        }

        oNext.onmouseover = function () {

            // console.log( this.style);

            this.style.backgroundPositionX = '-42px';  //精灵图,找上面的background图片地址切图

            this.style.backgroundPositionY = '0';

        }

    </script>

</body>

</html>

 属性 方法设置和获取

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .active{

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="box" class="box">alex</div>

    <a href="" target=""></a>

    <script>

        var oDiv = document.getElementsByTagName('div')[0];

            oDiv.setAttribute('class',oDiv.className + ' active')

    </script>

</body>

</html>

 对象属性和标签属性区分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" name="user" id="user">

<img src="./1.png" alt="" id="aImg">

男 <input type="radio" name="gender" checked="checked" id="male">

女 <input type="radio" name="gender" id="female">

<script>

    function $(idName) {

        return document.getElementById(idName);

    }

    var oInput = document.getElementById('user');

    var oImg = document.getElementById('aImg');

    console.dir(oInput); //DOM对象

    console.log(oInput.type);

    console.log(oInput.getAttribute('type'));

    console.dir(oImg);

    console.log(oImg.src); //对象的属性, 绝对路径

    console.log(oImg.getAttribute('src'));  //标签的属性,写的是什么就是什么

    // console.log( $('male').checked = false);

    console.log($('male').checked); // true 对象的属性 单选框 提交后台 建议使用对象属性checked

    console.log($('male').getAttribute('checked')); // 标签上的属性

</script>

</body>

</html>

JS中的三种弹框 alert(), confirm(), prompt()

1、alert():

　　①写在<script>标签中

　　②括号中的内容为字符串或者整型

　　③点击确认即可关闭，无返回值

2、confirm():

　　①写在<script>标签中

　　②括号中的内容为字符串和整型

　　③点击确认返回true，点击取消返回false

3、prompt(？，？):

　　①写在<script>标签中

　　②第一个问是显示的文本，第二个问是输入框中的默认值（可不写）

　　③点击确认返回输入框中的内容，取消返回null

Day045--DOM操作的更多相关文章

jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作看 ...
从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
前言接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
摆脱DOM操作，从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
前端页面卡顿？或是DOM操作惹的祸，需优化代码
文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...
webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery -- 一个js函数包一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
HTML 学习笔记 JQuery（DOM 操作）
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
dom操作导致超级卡顿。。。
var i=0;j=30;setinterval(function(){ document.getElementId(idname).style.top=j+'px'; i<3?i++:i=0; ...
php中通过DOM操作XML
DOM文档在js里早就接触过,知道DOM不但可以操作html文档,还可以操作XHTML,XML等文档,有着极强的通用性,下面我们通过两个小例子,看看在PHP中是如何用DOM操作XML文档的,和js中差 ...
jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类核心-DOM: DOM Co ...
[译]AngularJS中DOM操作
再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作 ...

随机推荐

【原】Java学习笔记001 - JAVA开发环境搭建
1.JDK下载并安装,以jdk-7u45-windows-i586.exe为例(注意JDK的安装和JRE的安装是分开的) 2.“我的电脑”右键属性,找到“高级系统设置”,找到“高级”tab下的“环境变 ...
linux kernel内存碎片防治技术
Linux kernel组织管理物理内存的方式是buddy system(伙伴系统),而物理内存碎片正式buddy system的弱点之一,为了预防以及解决碎片问题,kernel采取了一些实用技术,这 ...
Win10 Service'MongoDB Server' failed to start. Verify that you have sufficient privileges to start system services【简记】
最近工作中有需要用到 MongoDB数据库,以前用的3.*的版本,这次用的是较新4.0.6的版本,然后去官网下载安装. 安装到一半,就弹出如下提示,说是"MongoDB Server&quo ...
SQLServer修改表数据
使用SSMS数据库管理工具修改数据修改任意一条或者多条都可以 1:打开数据库,选择数据表,右键点击->编辑所有行(如未配置,点击编辑前200行). 2.编辑需要修改的数据->编辑完成后, ...
python进阶之正则表达式
概念: 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 目的? 给定一个正则表 ...
基于SVM的鸢尾花数据集分类实现[使用Matlab]
iris数据集的中文名是安德森鸢尾花卉数据集,英文全称是Anderson’s Iris data set.iris包含150个样本,对应数据集的每行数据.每行数据包含每个样本的四个特征和样本的类别信息 ...
1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(来看一下怎么样监听网络数据,监听电脑上位机软件的数据)
首先安装网络监听软件运行这个软件这个软件安装到电脑上,默认是监听咱电脑上的网络通信咱们先监听电脑的软件的网络通信数据,然后再说怎么监听Wi-Fi和APP的软件的网络通信数据咱就监听咱基础篇的 ...
容器中的JVM资源该如何被安全的限制？
前言 Java与Docker的结合,虽然更好的解决了application的封装问题.但也存在着不兼容,比如Java并不能自动的发现Docker设置的内存限制,CPU限制. 这将导致JVM不能稳定服务 ...
微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈，拍照，扫一扫等功能)
一.使用JSSDK需要一个公众号(需要认证!): (1).把自己项目的服务器地址输入. (2).把MP_verify_m7Qp93BAuIGDWRVO.txt 文件下载下来,放到该服务器域名指向的根 ...
PS制作科幻特效的金色立体文字
最终效果一.Photoshop打开背景素材. 二.然后我们来制作字效,首先当然是在画布上打上字了,在这里要注意的是尽量选一些艺术字体,这样做出来的效果比较好些,我这里用到的字体为“Matura MT ...

Day045--DOM操作

JS中的三种弹框 alert(), confirm(), prompt()

Day045--DOM操作的更多相关文章

随机推荐

热门专题