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

随机推荐

配置GIT DIFF/MERGE TOOL
关闭prompt backup git config --global difftool.prompt false git config --global mergetool.prompt false ...
关于HBase的memstoreFlushSize。
memstoreFlushSize是什么呢? memstoreFlushSize为HRegion上设定的一个阈值,当MemStore的大小超过这个阈值时,将会发起flush请求. 它的计算首先是由Ta ...
tomcat端口作用
<Server port="8005" shutdown="SHUTDOWN"> <Connector port="8080&q ...
MySQL 授权，回收权限，查看权限
show GRANTS for root@localhost;flush privileges;SHOW PROCESSLIST; #全局授权,回收权限GRANT ALL ON *.* TO 'tes ...
Alpha冲刺（四）
Information: 队名:彳艮彳亍团队组长博客:戳我进入作业博客:班级博客本次作业的链接 Details: 组员1(组长)柯奇豪过去两天完成了哪些任务文章基本的存储.列表生成显示展示G ...
MyEclipse中安装反编译插件
如何查看MyEclipse中Spring等框架的源文件. 首先先下载一个插件:http://pan.baidu.com/share/link?shareid=644034672&uk=3508 ...
JavaScript - this详解（一）
侃侃JavaScript中的this this为何如此多变? this总是跟它的执行上下文有关,而在JavaScript总会有开辟新的执行上下文的东西,比如函数,所以,this才如此的变化. 执行环境 ...
也说AOP
前言 1.引言 2.Aop概念 3.Aop实践 4.总结一.引言对于初入行的小白来讲,aop,ioc这两个程序设计思想总是傻傻分不清,不知道是个什么东东?别人再一谈各种框架更是云里雾里...博主今 ...
micropython esp8266 烧录
MicroPython 介绍 MicroPython 是一个 Python 3 语言的精简.高效实现,其包括 Python 标准库的一小部分,并经过优化,可以运行在微控制器和受限环境中运行. Micr ...
ML.NET Cookbook --- 1.如何从文本文件中加载数据？
使用ML.NET中的TextLoader扩展方法从文本文件中加载数据.你需要知道在文本文件中数据列在那里,它们的类型是什么,在文本文件中什么位置可以找到它们. 请注意:对于ML.NET只读取文件的某些 ...

DOM操作 045

一 什么是DOM

DOM操作 045的更多相关文章

随机推荐

热门专题

一什么是DOM