DOM基础学习20200422

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量160 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luojunjie1999/article/details/105681520
版权

DOM：文档对象模型（Document Object Model）
DOM树
在这里插入图片描述

获取元素

1.根据ID获取

document.getElementById('time')
//1.id严格区分大小写
//2.返回的是元素对象

 console.dir(time);//打印返回的元素对象，可以查看里面的属性方法

2.根据标签名获取

<ur>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>
</ur>
<ur id='nav'>
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
</ur>
<script>
//返回的是获取对象的集合，以伪数组的形式存储
var lis=document.getElementsByTagName('li');
console.log(lis);
</script>

通过ID再通过标签名查找：

var nav=document.getElementById('nav');
var navlis=nav.getElementsByTagName('li');

3.H5新增方法（如果不考虑兼容性，推荐使用）

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ur>
            <li>首页</li>
            <li>产品</li>
        </ur>
    </div>
<script>
// 1.getElementsByClassName(),根据类名获得元素集合
var boxs=document.getElementsByClassName('box');
console.log(boxs);
//2.querySelector(),返回指定选择器的第一个元素对象
var firstbox=document.querySelector('.box');//根据类名，前面需要加.
console.log(firstbox);
var nav=document.querySelector('#nav');//根据ID名，前面需要加#
console.log(nav);
var li=document.querySelector('li');//根据标签名
console.log(li);
//3.querySelectorAll(),返回指定选择器的所以元素对象
var allbox=document.querySelectorAll('.box');
console.log(allbox);
var lis=document.querySelectorAll('li');//根据标签名
console.log(lis);
</script>

获取特殊元素

<script>
    //1.获取body元素
    var bodyEle=document.body;
    console.log(bodyEle);
    //2.获取html元素
    var htmlEle=document.documentElement;
    console.log(htmlEle);
</script>

事件基础

点击按钮触发事件：

<button id="btn">唐伯虎</button>
<script>
    //点击按钮弹出对话框
    //1.事件三要素：事件源，事件类型，事件处理程序
    //（1）事件源：事件被触发的对象
    var btn=document.getElementById('btn');
    //(2)事件类型：如何触发  什么事件
    //(3)事件处理程序：通过函数赋值完成程序
    btn.onclick=function(){
        alert('点秋香');
    }
</script>

点击div控制台输出

<div>123</div>
<script>
    //执行事件步骤
    //点击div控制台输出 我被选中了
    //(1)获取事件源
    var div=document.querySelector('div');
    //(2)绑定事件，处理事件
    //(3)添加事件处理程序
    div.onclick=function(){
        console.log('我被选中了');
    }
</script>

操作元素

案例

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        //点击按钮后，div里面的文字发生变化
        //1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var date
        //2.注册事件
        btn.onclick = function(){
            div.innerText='2020-4-22';
        }
    </script>

innertext和innerHTML区别：

    <div></div>
    <p>
        我是文字
        <span>
            123
        </span>
    </p>
    <script>
        //innertext和innerHTML的区别
        //1.innertext 不识别HTML标签，是非标准的,会去除空格和换行
        var div=document.querySelector('div');
        div.innerText='<strong>今天是</strong>2020-04-22';
        //2.innerHTML，识别HTML标签,是w3c标准，不会去除空格和换行
        div.innerHTML='<strong>今天是</strong>2020-04-22';
        //这两个属性可读写，可以获取里面内容
        var p=document.querySelector('p');
        console.log(p.innerText);//获取内容
        console.log(p.innerHTML); 
    </script>

修改元素属性
点击按钮修改图片

    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="E:\images\ldh.jpg" alt="" title="刘德华">
    <script> 
         //scr：图片文件路径 title：鼠标放在图片上显示的文字
        //修改元素属性 scr
        //1.获取元素
        var ldh=document.getElementById('ldh');
        var zxy=document.getElementById('zxy');
        var img=document.querySelector('img');
        //2.注册事件
        zxy.onclick=function(){
            img.src='E:\images\\zxy.jpg';
            img.title='张学友';
        }
        ldh.onclick=function(){
            img.src='E:\images\\ldh.jpg';
            img.title='刘德华';
        }
    </script>

表单属性操作
1.value：通过value改值
dsabled：禁用按钮

 <button>按钮</button>
 <input type="text" value="输入内容">
 <script>
     //1.获取元素
     var btn=document.querySelector('button');
     var input=document.querySelector('input');
     //2.注册事件，处理程序
     btn.onclick=function(){
        // input.innerHTML='被点击了';这是普通盒子
        //表单里面的值通过value修改
        input.value='被点击了';
        btn.disabled=true;//表单按钮被禁用
        //this.disabled=true;   this指事件的调用者btn，方法一样
     }
 </script>

2.显示隐藏密码案例：

<body>
    <div class="box">
        <label for="">
            <img src="E:\images\闭眼.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        //1.获取元素
        var eye=document.getElementById('eye');
        var pwd=document.getElementById('pwd');
        //2.注册事件
        var flag=0;
        eye.onclick=function(){
            if(flag==0){
                pwd.type='text';
                flag=1;//将flag赋值为1，记为显示密码
            }
            else{
                pwd.type='password';
                flag=0;//将flag赋值为0，记为隐藏密码
            }
        }

    </script>
</body>
IE吃饭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
事件三要素
demo_020的博客
01-30 1351
事件基础 js使我们有能力创建动态页面，而事件是可以被js侦测到的行为 简单理为：触发–响应机制 事件是由三部分组成 事件源 时间类型 事件处理程序 我们也称为事件三要素 执行事件的步骤 点击div控制台输出 我被选中 1.获取事件源 2.绑定事件 注册事件 <script> //点击按钮弹出对话框 //事件是由三部分组成 事件源 时间类型 事件处理程序 我们也称为事件三要素 //1. 事件源 事件被触发的对象 谁？ 按钮 var btn = do
js 基础学习 遍历DOM
qq_40890601的博客
07-23 930
DOM这块知识很重要，做个总结吧！ DOM 表示文档对象模型，每个HTML标签都是一个对象，标签内的文本也是对象，所有这些对象都可以使用 js 来访问和修改。 js 共有12 种节点类型 通常用到的有四种： document — DOM 的“入口点”。 元素节点 — HTML 标签，树构建块。 文本节点 — 包含文本。 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。 自动修正 如果浏览器遇到格式不正确的HTML，它会在形成DOM的时候修正它。 例如，顶级标签永
执行事件步骤
海阔天空
01-31 153
执行事件步骤 点击 div 控制台 输出 我被选中 了 获取·事件源 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </hea
js中的常见的button绑定事件的方法
zllww123的博客
08-05 7911
我一般使用如下常见比较简单的四种：     This is my JSP page.               var btn=document.getElementById("btn");       btn.onclick=function (){       alert("sf");       }        button      
js实现唐伯虎‘点‘秋香
黄大仙
08-04 370
<button id="btn">唐伯虎</button> <script> //事件源 var btn=document.getElementById('btn'); //事件类型 点击 btn.onclick = function () { alert('点秋香'); } //事件处理程序 </script> <div id="dv">点我</div> <sc
DOM基础学习1
qq_61718994的博客
04-03 1009
学习内容：API和Web API，DOM简介，获取元素，事件基础，操作元素-修改元素内容，元素操作-修改元素属性，属性操作-修改元素表单 学习笔记： API API 是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，或理解内部工作机制的细节。 Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM） 总结 API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现 We.
DOM基础知识
Mozarty的博客
04-22 1262
何为DOMDOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。何为Web APIWeb API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。
JavaScript基础学习报告：关于JavaScript文本对象模型DOM的学习心得
qq_41096610的博客
04-20 512
JavaScript基础学习报告：关于JavaScript文本对象模型DOM的学习心得 什么是JavaScript DOM 这一段时间在学习JavaScript有关的内容，JavaScript的文档对象模型，通俗的说就是一个接口，中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。 DOM定义了访问HTML文档的标准 当网页被加载时，浏览器会创建页面的文档对象模型（Do...
JavaScript基础学习 DOM
柠檬味小发糕的博客
12-14 511
JavaScript基础学习 DOMDOM获取元素获取特殊元素 html与body事件三要素innerText与innerHTML的区别分时间问候案例 DOM获取元素 <!DOCTYPE html> <html> <head> <title>DOM开始学习</title> </head> <body> <div id="time">2021-12-13</div>
JS学习笔记05-DOM基础
欢迎访问我的主页：https://www.bookbook.cc
04-24 7156
文章目录一、DOM基础1.1 什么是DOM？二、DOM节点2.1 什么是DOM节点？2.2 childNodes 获取子节点(会获取文本节点)2.3 nodeType 返回元素的节点类型。2.4 nodeName 返回元素的名称。2.5 nodeValue 设置或返回指定节点的节点值。2.6 children 获取子节点2.7 parentNode 获取父节点 一、DOM基础 1.1 什么是DO...
html.rar_dom基础学习
09-21
DOM基础学习主要包括以下几个方面： 1. **DOM结构**：DOM将HTML文档解析为一棵由节点组成的树，其中每个元素、属性和文本都对应一个节点。根节点是`<html>`，下面包含`<head>`和`<body>`两个子节点。元素节点有子...
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
JavaScript学习笔记之DOM基础 2.4
01-19
DOM的发展，与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑，DOM才能正确地发挥其功用。如今，正确的语义结构、表现与内容分离等要求，都已经成为网页设计中的基本要求。因此，在网页前端开发中，DOM的存在，...
Jquery 基础学习笔记
10-29
本篇笔记主要介绍了JQuery的基础用法，对于初学者来说是非常实用的学习资料。 1. **属性操作**：`attr()` 方法允许我们设置或获取元素的属性。例如，`$("input").attr("class","btn")` 会将所有`<input>`元素的`...
DOM基础及DOM操作HTML
08-04
通过学习DOM基础和DOM操作HTML，你可以更好地控制网页内容，实现动态效果，提升网页的交互性和用户体验。王兴魁老师的课程将帮助你掌握这些技能，并结合AJAX实践，进一步提升你的前端开发能力。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 282
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 898
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 672
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
JavaScript 常见数学用法
2302_77250325的博客
07-17 401
与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。可以在不首先创建Math对象的情况下使用所有方法和属性（常量）。
JavaScript基础：DOM编程与Window对象特性
"Window对象是JavaScript中的全局对象，它表示浏览器窗口，包含了许多与浏览器...通过深入学习Window对象的属性和方法，以及DOM编程的基本概念，开发者可以有效地控制浏览器窗口的行为，创建交互式和动态的网页应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值