DOM(document object model)

DOM主要研究htmll中的节点(也就是标签)

对节点进行操作    可以改变标签  改变标签属性  改变css样式  添加事件

一、操作流程

1.选择你要操作的节点

1)document.getElementById(“id名字”)通过id获取元素

2)document.getElementByTagName(“div”)获取整个哇昂也中所有div构成的一个数组集合

3)document.getElementsByClassName(“name”)获取整个网页中所有的class构成的一个数组集合

2.输出

1)document.write()在整个文档输出
2)指定的元素中输出element.innerHTML=
innerHTML指的是元素中的内容
Element.innerText=

二者区别

innerHTML中可以嵌套标签
innerText 中不可以嵌套标签 直接输出内容

二、函数都有返回值

而方法的本质也是函数 所以也有返回值
document.getElementById() 返回的是获取的标签
getElementsByClassName()和 getElementsByTagName() 返回的是一个数组
document.getElementsByClassName("name")[2].innerHTML="hhhh";

1.改变标签的属性

元素.属性名   属性单词 attribute

2.修改和添加css样式

元素.style.css属性名=“属性值”

三、事件:用户在网页中所触发的行为

事件:用户在网页中所触发的行为
点击 鼠标滑动 键盘 表单
点击 onclick
鼠标进入 onmouseenter 鼠标离开 onmouseleave
鼠标移动 onmousemove
鼠标悬浮 onmouseover 鼠标移除 onmouseout
鼠标按下 onmousedown 鼠标抬起 onmouseup

表单聚焦 onfocus 失去焦点 onblur 表单内容被修改onchange

浏览器加载完成 onload

1.事件的使用方法:必须跟一个函数配合

1)事件  将事件当做标签属性使用

2)通过事件绑定  将事件当成一个元素的属性

特例:

对于class html中的class在js中是关键字 获取这个属性是必须使用className获取或修改

四、js中的for循环和事件的关系

  事件的执行和for循环没有关系,都是相互独立的。

解决事件中的i和for匹配

方法一,给事件套一个自调用函数

方法二

人为定义一个属性 将索引存在属性里  需要的时候 调用属性 (用this)

五、this

this是js的一个关键字 他是一个对象 一般用在函数里用于指向函数内部的关系
div.onclick=function(){this}
如果函数在定义的时候 前面有“.” 那么this就指向前面的对象
如果函数定义时没有“.” 那么this就是window

从零开始的全栈工程师——js篇2.8的更多相关文章

  1. 从零开始的全栈工程师——js篇2.5

    数据类型与全局属性 js的本质就是处理数据 数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt 制定了js的数据类型 一.数据类型 1.基本数据类型 基本数据类型就是简单 ...

  2. 从零开始的全栈工程师——js篇2.1(js开篇)

    JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么?    页 ...

  3. 从零开始的全栈工程师——js篇(闭包)

    闭包是js中的一大特色,也是一大难点.简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量. 闭包的三大特点为: 1.函数嵌套函数 2.内部函数可以访问外部函数的变量 3.参数和变量不会 ...

  4. 从零开始的全栈工程师——js篇(js的异步)

    js中的异步 Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任 ...

  5. 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)

    一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...

  6. 从零开始的全栈工程师——js篇2.20(事件对象 冒泡与捕获)

    一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...

  7. 从零开始的全栈工程师——js篇2.16

    js操作css样式 div.style.width=“200px” 在div标签内我们添加了一个style属性 并设定了width值 这种写法会给标签带来了大量的style属性 跟实际项目是不符的 我 ...

  8. 从零开始的全栈工程师——js篇2.14(表单与计时器)

    一.表单 Form input select textarea type=”radio/checkbox/password/button/text/submit/reset/” 表单的事件 oncha ...

  9. 从零开始的全栈工程师——js篇2.12(面向对象)

    面向对象 Js一开始就是写网页特效,面向过程的,作者发现这样写不好,代码重复利用率太高,计算机内存消耗太大,网页性能很差. 所以作者就收到java和c的影响,往面向对象靠齐.Js天生有一个Object ...

  10. 从零开始的全栈工程师——js篇2.10(对象与构造函数)

    对象与构造函数 一.js数据类型 基本数据类型:string   undefined   null  boolean  number 引用数据类型  Object  array  function 二 ...

随机推荐

  1. ansible应用案例-一键安装flask

    一.添加主机 sudo vim /etc/ansible/hosts ------------------------------------------------------> [group ...

  2. elasticsearch2.x插件之一:marvel(简介)

    在 安装插件的过程中,尤其是安装Marvel插件遇到了很多问题,又要下载license.Marvel-agent,又要下载安装Kibana,很多内容 不知道为何这样安装处理.仔细看了看ElasticS ...

  3. Angular14 Angular相关命令

    1 创建相关 1.1 创建项目 ng new 项目名  ->  创建新项目 ng new 项目名 --skip-install  -> 不进行模块安装  ng new 项目名 -si ng ...

  4. 24、sam- 详解

    http://note.youdao.com/share/?id=312fa04209cb87f7674de9a9544f329a&type=note#/ https://davetang.o ...

  5. 8、scala函数式编程

    一.函数式编程1 1.介绍 Scala中的函数是Java中完全没有的概念.因为Java是完全面向对象的编程语言,没有任何面向过程编程语言的特性,因此Java中的一等公民是类和对象, 而且只有方法的概念 ...

  6. Lucene.net 搜索引擎的中文资料

    以下是我找到的网上一些关于Lucene.net 搜索引擎的介绍资料 https://code.i-harness.com/zh-CN/tagged/lucene?page=5 http://jingp ...

  7. KOL运营之——如何与网文作者高效地约稿?

    本文来自网易云社区,转载务必请注明出处. 随着网络文学的发展,影响力逐渐扩大,越来越多的同事在工作中遇到需要和这些作者打交道的时候.对于作者这个群体,很多时候都是只闻其书,不见其人.要跟这样的群体打交 ...

  8. 微信H5支付----报undened index openid

    1.检查传过来的订单号是否是恒定不变的 2.检查总价是否为整数(微信要求订单金额是整数).以及不能为0 以下是这次错误的具体原因: 主要是前面读取的金额数据需要读取接口的,而不是数据库的(接口读取的是 ...

  9. MongoDB自定义存储数据库文件位置

    mongodb下载地址:https://www.mongodb.com/download-center#community 本机安装目录如下: 配置步骤如下: 1.新建文件夹data(文件夹内再建一个 ...

  10. 洛谷P2534 [AHOI2012]铁盘整理

    P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...