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

随机推荐

python 学习之路开始了
python 学习之路开始了.....记录点点滴滴....
Yii2在Form中处理短信验证码的Validator，耦合度最低的短信验证码验证方式
短信验证码在目前大多数web应用中都会有,本文介绍一个基于Yii2 Validator方式的验证码验证方式. 在其他文章中看到的方式大多比较难做到一次封装,多次重用. 使用此方式的好处自然不用多说,V ...
UVa 11324 The Largest Clique (强连通分量+DP)
题意:给定一个有向图,求一个最大的结点集,使得任意两个结点,要么 u 能到 v,要么 v 到u. 析:首先,如果是同一个连通分量,那么要么全选,要么全不选,然后我们就可以先把强连通分量先求出来,然后缩 ...
strerror线程安全分析
导读 strerror是否线程安全了? 1 errno是否线程安全? 1 附1:strerror源码 2 附2:__strerror_r源码 2 strerror是否线程安全了? 答案是NO,但它有个 ...
sublime Text2常见插件介绍
zen coding 一种快速编写HTML/CSS代码的方法,已改名为Emmet,并且搭建了一个新的网站:docs.emmet.io Sublime Text 2安装插件Emmet后,打开sublim ...
洛谷 P2596 [ZJOI2006]书架 (splay)
题目描述小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿下一本.由于这些 ...
洛谷P2173 [ZJOI2012]网络(10棵lct与瞎jb暴力)
有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜色的边构成的环. 在这个图上,你 ...
Hexo 最常用的几个命令
Hexo 约有二十个命令,但普通用户经常使用的大概只有下列几个: hexo s hexo s 启动本地服务器,用于预览主题.默认地址: http://localhost:4000/ hexo s 是 ...
【模板模式】 Template Pattern
模板模式又叫模板方法模式,在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情冴下,重新定义算法中的某些步骤(这个我觉得很抽象,很抽象) e:学会说“不 ...
Verilog MIPS32 CPU（八）-- 控制器
Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...

DOM操作 045

一 什么是DOM

DOM操作 045的更多相关文章

随机推荐

热门专题

一什么是DOM