DOM操作 045

一什么是DOM

　　DOM : 文档对象模型它为文档提供了结构化表示并定义了如何通过脚本来访问文档结构 . 目的就是为了能让js操作HTML元素而制定的一个规范 .

　　DOM树(一切都是节点):

　　　　元素节点 : HTML标签

　　　　文本节点 : 标签中的文字(比如标签之间的空格换行)

　　　　属性节点 : 标签的属性

　　DOM可以做什么 : 找对象(元素节点) 设置对象的值设置元素的样式动他创建和删除元素事件的触发响应 : 事件源事件事件的驱动程序

　　获取DOM的方式:

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

        console.log(document.documentElement);

        console.log(document.body)

        //1.通过id获取

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

        console.log(oDiv);

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

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

        console.log(oTag);

        oTag.style.color = 'red';

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

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

        console.log(oActives);

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

            //样式设置

            oActives[i].style.backgroundColor = 'green';

        }

        //救命稻草

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

        console.log(oD);

        oD.forEach(function (item,index) {

            console.log(item);

        })

    </script>

</body>

</html>

二 DOM中的操作:

　　1 js对值的处理:

<!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 = '<h3>嘿嘿嘿</h3>'

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

        // console.log(oDiv.innerText);

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

        console.log(oDiv.innerHTML);

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

        document.getElementById('user').value = 'alex';

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

    </script>

</body>

</html>

　　2 对 css 的操作:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box {

            width: 200px;

            height: 300px;

            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) {

            console.log(this.style);

            //this  谁做的事件操作 this指向谁

            this.style.backgroundColor = 'green';

            this.style.width = '400px';

            isRed = false;

        } else {

            this.style.backgroundColor = 'red';

            isRed = true;

        }

    }

</script>

</body>

　　3 对标签属性操作:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box {

            width: 200px;

            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 对标签赋值id

            // oDiv.id = 'box';

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

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

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

            oDiv.className = oDiv.className + ' active';

            isShow = false;

        }else{

             oDiv.className = 'box';

            isShow = true;

        }

    }

    console.log(11111);

</script>

</body>

</html>

　　4 .img标签属性的操作:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*重置样式*/

        *{

            padding: 0;

            margin: 0;

        }

        .swiper{

            width: 1000px;

            height: 460px;

            margin: 0 auto;

            background-color: red;

            position: relative;

        }

        .swiper span{

            position: absolute;

            right: 0;

            top: 50%;

            width: 41px;

            height: 69px;

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

        }

    </style>

</head>

<body>

    <div class="swiper">

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

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

    </div>

    <script>

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

        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'

            //console.log(this.getAttribute('src'))

        }

        oNext.onmouseover = function () {

            // console.log( this.style);

            this.style.backgroundPositionX = '-42px';

            this.style.backgroundPositionY = '0';

        }

    </script>

</body>

</html>

　　5 .属性方法设置和获取

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

    <script>

        // document.getElementsByTagName('div')[0].setAttribute()

    </script>

</body>

</html>

　　6 .对象属性和标签属性区分

# 区分DOM对象属性 和 标签属性

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

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

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

console.log(this.getAttribute('src'));

<!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="sex" checked="xxxxx" id="nan">

女 <input type="radio" name="sex" id="nv">

<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(  $('nan').checked); //对象的属性   单选框 提交后台 建议使用对象属性checked

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

</script>

</body>

</html>

DOM操作 045的更多相关文章

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

随机推荐

springboot之JdbcTemplate单数据源使用
本文介绍在Spring Boot基础下配置数据源和通过JdbcTemplate编写数据访问的示例. 数据源配置在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. ...
vs2015 debugger,unable to attach to application iisexpress.exe
vs2015 unable to attach to application iisexpress.exe,没有可用的数据了搞了一天也没解决...
Assigning retained object to weak property object will be released after assignment
在ARC中,如果添加了weak的属性.初始化了相关的object然后给这个属性赋值的时候就会看到Xcode给出这个提示. 这个时候可以这么处理:在别的地方已经retain这个object的引用. @p ...
C++编译器之间的不同性能
C++编译器之间的不同性能编译器就是将“高级语言”翻译为“机器语言(低级语言)”的程序.一个现代编译器的主要工作流程:源代码 (source code) →预处理器 (preprocessor) → ...
VC6.0加载lib文件的三种方法
MFC编写程序,都要用到动态链接库,MFC相关的动态库有MFCD42和MFC42等,MFC框架程序已经自动加载,那么如何引入第三方的动态链接库到工程中呢? 静态链接库是要先把程序中所需要使用的函数编译 ...
Hadoop 基础概念
Hadoop就是一个实现了Google云计算系统的开源系统,包括并行计算模型Map/Reduce,分布式文件系统HDFS,以及分布式数据库Hbase,同时Hadoop的相关项目也很丰富,包括ZooKe ...
.net core i上 K8S(四).netcore程序的pod管理，重启策略与健康检查
上一章我们已经通过yaml文件将.netcore程序跑起来了,但还有一下细节问题可以分享给大家. 1.pod管理 1.1创建pod kubectl create -f netcore-pod.yaml ...
WebService 常用的设置
1.修改WebService接收长度 <binding name="IAuthServiceSoap11Binding" maxBufferSize="214748 ...
LightOJ 1234 Harmonic Number(打表 + 技巧)
http://lightoj.com/volume_showproblem.php?problem=1234 Harmonic Number Time Limit:3000MS Memory ...
JavaScript作用域详解
作用域在JavaScript中是非常重要的概念,理解了它对更深入地理解闭包等概念都有很大的帮助,这篇文章就来谈谈我对作用域的理解. 一.全局作用域与局部作用域在JavaScri ...

DOM操作 045

一 什么是DOM

DOM操作 045的更多相关文章

随机推荐

热门专题

一什么是DOM