昼猫笔记--给你带来不一样的笔记

不止是笔记 更多的是思考

Hello,大家好,昼猫,今天来加深下DOM

什么DOM呢?它的全称叫
Document Object Model

通过全称可以知道它是
文档对象模型,通过DOM可以来任意来修改网页中各个内容

是不是很牛掰,通过学习它可以达到一些网页的特效

DOM简介

文档

文档指的是网页,一个网页就是一个文档

对象

对象指将网页中的每一个节点都转换为对象 , 转换完对象以后,就可以以一种纯面向对象的形式来操作网页了

模型

模型用来表示节点和节点之间的关系,方便操作页面

节点(Node)

节点是构成网页的最基本的单元,网页中的每一个部分都可以称为是一个节点

虽然都是节点,但是节点的类型却不同

常用的节点

文档节点 (Document),代表整个网页

元素节点(Element),代表网页中的标签

属性节点(Attribute),代表标签中的属性

文本节点(Text),代表网页中的文本内容

DOM操作

DOM查询

在网页中浏览器已经为我们提供了document对象

它代表的是整个网页,它是
window对象的属性,可以在页面中直接使用。

document查询方法

根据元素的id属性查询一个元素节点对象:

document.getElementById(id属性值);

根据元素的name属性值查询一组元素节点对象:

document.getElementsByName(name属性值);

根据标签名来查询一组元素节点对象:

document.getElementsByTagName(标签名);

元素的属性

读取元素的属性:

语法:元素.属性名

例子:
ele.
name

ele.
id

ele.
value

ele.
className

修改元素的属性:  语法:元素.属性名 = 属性值

innerHTML使用该属性可以获取或设置元素内部的HTML代码

事件Event

事件指的是用户和浏览器之间的交互行为。比如:
点击按钮、
关闭窗口、
鼠标移动...

我们可以为事件来绑定回调函数来响应事件。

绑定事件的方式:

1.可以在
标签的事件属性中设置相应的JS代码

<button onclick=js代码...>昼猫笔记</button>

2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件

<button id=btn>按钮</button>
<script>
   var btn = document.getElementById(btn);
   btn.onclick = function(){
   };
</script>

昼猫笔记

昼猫笔记--什么是DOM的更多相关文章

  1. 昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行?

      本篇主要内容:异步.定时器引发的思考 预计阅读时间:8分钟 了解 我们都知道在js中定时器有两种  setInterval()  . setTimeout()   setInterval() :按 ...

  2. 昼猫笔记 JavaScript -- 作用域技巧!!

    简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...

  3. 昼猫笔记 -- 面向对象(II) - 继承

    继承 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念. 所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现,还有就是js可以 ...

  4. 昼猫笔记 JavaScript -- 面向对象(I)

    本文内容搬运自公众号 原文链接 本文主要内容:面向对象 预计阅读时间:6分钟 面向对象的方式 单例模式(字面量定义) var obj = {} 类的实例 var obj = new Object() ...

  5. 昼猫笔记 JavaScript -- 闭包

      本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...

  6. 昼猫笔记 从此告别复杂代码--JavaScript

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...

  7. jQuery:自学笔记(3)——操作DOM

    jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...

  8. Javascript学习笔记三——操作DOM(二)

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  9. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...

随机推荐

  1. android-async-http二次封装和调用

    Android  android-async-http二次封装和调用 在开发过程中,网络请求这块的使我们常常遇到的一个问题,今天去github 站点上面学习android-async-http,认为还 ...

  2. 不安全的直接对象引用:你的 ASP.NET 应用数据是否安全?

    介绍 作为一个在X94的航空工程师,你的老板要求你从2号楼的工程图中检索出一个特定的专利.不幸的是,进入大楼需要你出示你具有进入大楼的资格的证明,然后你迅速地以徽章的形式出示给了保安.到了十三楼,进入 ...

  3. storm trident function函数

    package cn.crxy.trident; import java.util.List; import backtype.storm.Config; import backtype.storm. ...

  4. iOS自动布局高级用法 && 纯代码约束写法

    本文主要介绍几个我遇到的总结的高级用法(当然我相信肯定有不少比这还高级的). 简单的storyboard中上下左右约束,固定宽高啥的用法在这里就不做赘述了. autolayout自动布局是iOS6以后 ...

  5. nyoj--12--喷水装置(二)(区间覆盖问题+贪心)

    喷水装置(二) 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 有一块草坪,横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n(n<=10000)个点状的喷水 ...

  6. laravel中的数据迁移和数据填充

    laravel中的数据迁移和数据填充 标签(空格分隔): php 生成迁移文件两种方式: 1 新建一个表的迁移文件 php artisan make:migration create_students ...

  7. Python开源爬虫项目代码:抓取淘宝、京东、QQ、知网数据--转

    数据来源:数据挖掘入门与实战  公众号: datadw scrapy_jingdong[9]- 京东爬虫.基于scrapy的京东网站爬虫,保存格式为csv.[9]: https://github.co ...

  8. c++几种排序算法代码

    #include <iostream> #include <vector> using namespace std; //交换int void swap(int& a, ...

  9. UI Framework-1: Browser Window

    Browser Window The Chromium browser window is represented by several objects, some of which are incl ...

  10. iOS开发——导航栏的一些小设置

    1.导航栏的隐藏与显示:navigationBarHidden - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:YES]; ...