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

随机推荐

MySQL 存储过程和存储函数学习
#一.存储过程和存储函数的创建案例 CREATE PROCEDURE myprocedure(in a int,in b int ,OUT c INT) BEGIN set c=a+b; end; c ...
javascript总结30 :DOM事件
事件: 1 在js中可以说一整套事件能完成一个功能: 事件的定义:当什么时候执行什么事: 使用事件的基本结构:事件源+事件类型=执行的指令 2 事件三要素:事件源事件类型, 驱动程序(匿名函数). ...
PrintWriter类
PrintWriter是一种过滤流,也是一种处理流,即能对字节流和字符流进行处理. 1.查询API后,我们发现,会有八种构造方法.即: PrintWriter(File file) Creates a ...
Tango Java API常数
Tango Java API Constants常数 Constant Field Values常数字段值 Contents com.google.* com.google.* com.google. ...
sampling method
sampling method 背景在贝叶斯框架下,利用后验分布对参数进行估计,也即其中 (1)是参数的先验分布. (2)是似然分布,数据集的生成联合概率 (3)是参数的后验分布. 通常分布很复杂 ...
onbeforeunload事件
window.onbeforeunload=function(){ return "您正在编辑的博客尚未保存,确定要离开此页吗?"; }; 1.这个事件存在的意义就是防止用户不小心 ...
使用bmfont制作字体
本地显示正常将制作好的字体上传别人用不好使制作完场景没ctrl+s 保存 ctrl+s保存之后生成另外的文件
MVVM Caliburn.Micro学习记录
wpf中MVVM一直用的自己写的框架,最近试了试Caliburn.Micro. Caliburn.Micro可以通过x:name来进行属性和事件绑定. 比如 <Button x:Name=&qu ...
牛客网提高组模拟赛第五场 T1同余方程（异或）（位运算）
区间不好做,但是我们可以转化成前缀来做.转化为前缀之后之后就是二维前缀和. 但是我还是不怎么会做.所以只能去看吉老师的题解 (确定写的那么简单真的是题解???). 我们要求模一个数余0,就等于找它的倍 ...

DOM操作 045

一 什么是DOM

DOM操作 045的更多相关文章

随机推荐

热门专题

一什么是DOM