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

随机推荐

bootstrap-海棠
12 缩略图和警告框 <p class='alert alert-info'>这个是警告组<button class='close' data-dismiss='alert'> ...
CentOS7 安装Maven3
下载安装文件 cd /root wget http://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.3.9/binaries/apache- ...
Autoconf 中文手册
Autoconf Autoconf Creating Automatic Configuration Scripts Edition 2.13, for Autoconf version 2.13 D ...
nodejs版本升级
网上都说 npm install –g n 可是一直不行,换做 npm install -g cnpm --registry=https://registry.npm.taobao.org ok
http-bio-8080"-exec-6
现象如下: Tomcat7启动后,后台抛出如下异常,前台一直无法登陆 Exception in thread ""http-bio-8080"-exec-6&qu ...
DLL用def定义文件来导出重载函数（转）
动态链接库DLL_Sample.dll DLL_Sample.h:#ifdef TEST_API# define TEST_API _declspec(dllexport)#else# define ...
Code First ef SQL Server 版本不支持数据类型“datetime2”
When calling DbContext.SaveChanges, I get a DbUpdateException:An unhandled exception of type 'System ...
数独·唯一性技巧（Uniqueness）-2
Hidden Rectangle(隐藏矩形) 在由候选数(AB)组成.可能形成UR结构的4格中,有2-3格存在额外的候选数,此时若以不存在额外候选数的一格为起点,检查其对角格所在的行和列,若该行和列其 ...
腾讯云通信UserSig生成.Net实现
腾讯云通信后台生成usersig只有java实现代码.以下是根据java代码转换为net实现,java版GitHub地址:https://github.com/TencentVideoCloudMLV ...
只是误以为导入了maven依赖
背景: 之前用Spring Boot 开发了一个小项目,考虑将代码迁到Git服务器,由于之前没用过Git,在将代码正式签入Git服务器前, 我想先签入一个最简单的Spring Boot程序代码作为试验 ...

DOM操作 045

一 什么是DOM

DOM操作 045的更多相关文章

随机推荐

热门专题

一什么是DOM