前端学习记录 JS DOM

HTML DOM 文档对象模型 被结构化为对象树

HTML DOM 方法是能在 HTML 元素上执行的动作

HTML DOM 属性是能够设置或改变 HTML 元素的值

查找 HTML 元素

  document.getElementById(id) 通过元素 id 查找

  document.getElementByTagName(name) 通过标签名查找

  document.getElementByClassName(name) 通过类名查找元素

改变 HTML 元素

  element.innerHTML = new html content 改变元素的 inner HTML

  element.attribute = new value 改变 HTML 元素的属性值

  element.setAttribute(attribute, value) 改变 HTML 元素属性值

  element.style.property = new style 改变 HTML 元素样式

删除和添加元素

  document.createElement(element) 创建 HTML 元素

  document.removeChild(element) 删除 HTML 元素

  document.appendChild(element) 添加 HTML 元素

  document.replaceChild(element) 替换 HTML 元素

  document.write(text) 写入 HTML 元素

添加事件处理程序

  document.getElementById(id).onclick = function() {code} 向 onclick 事件添加事件处理程序

查找 HTML 对象

  document.anchors

  document.applets

  document.baseURL

  document.body

  document.cookie

  document.doctype

  document.documentElement

  document.documentMode

  document.documentURL

  document.domain

  document.domConfig

  document.embeds

  document.forms

  document.head

  document.images

  document.implementation

  document.inputEncoding

  document.lastModified

  document.links

  document.readyState

  document.referrer

  document.scripts

  document.strictErrorChecking

  document.title

  document.URL

DOM 事件监听器

  element.addEventListener(event, function, useCapture);

    第一个参数是事件类型(click / mousedown / ...)

    第二个参数是事件发生时调用的函数

    第三个参数是布尔值 指定使用事件冒泡还是事件捕获

    举个栗子:element.addEventListener("click",  function() { alert ("Zlrrr"); });

事件冒泡和事件捕获

  在 HTML DOM 中有两种事件传播的方法 冒泡和捕获;事件传播是一种定义当发生事件时元素次序的方法 例如 <div> 标签里面有 <p> 然后用户点击了 <p> 那么应该先处理哪个的 click 事件?在冒泡中 最内侧的元素会被最先处理(<p> <div>)在捕获中最外侧的元素会被最先处理 (<div> <p>) 默认 useCapture = false 是冒泡 true 是事件捕获

原文地址:https://www.cnblogs.com/zlrrrr/p/11518863.html

时间: 2024-10-12 21:33:48

前端学习记录 JS DOM的相关文章

前端学习:JS学习总结(图解)

前端学习:JS学习总结(图解) JS比HTML和CSS的知识点要多的多,下面分几段来介绍其内容... 为了能让大家更好的检索,前面的图解是整个JS的概括,后面的才是知识点... 旁边就是目录,建议用目录来观看本博客...... JS的知识体系  JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 JS是什么? JS能做什么? JS的历史及组成 JS的引入方式 JS基本语法 变量 原始数据类型 引入数据类型 运算符 逻辑语句 JS内置对象 JS对

前端小白之每天学习记录----js简单的组件封装

设计模式:是解决问题的模板 关于设计模式,可以阅读汤姆大叔的博文http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 这里简单介绍两种设计模式: 1.单例模式:单例就是保证一个类只有一个实例 eg:在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法: var people = { name: "lxb", age: "22"

前端学习(23)~js学习(一)

Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(实现业务逻辑和页面控制) 浏览器的介绍 浏览器是网页运行的平台,常用的浏览器有谷歌(Chrome).Safari.火狐(Firefox).IE.Edge.Opera等. 浏览器的组成 浏览器分成两部分: 渲染引擎 JS 引擎 1.渲染引擎:(浏览器内核) 浏览器所采用的「渲染引擎」也称之为「浏览器内核」,用来解析 HTML与CSS.渲染引擎决定了浏览

前端学习记录1:开始

一般前端工作的流程步骤: 一.设计稿分析:接到设计稿,分析设计稿,和相关人沟通需求 二.切片:切出要用到的图片和图标,并导出适合的图片格式(用PS或FIREWORKS等工具) 三.页面制作:用HTML和CSS写页面的基础结构(sublime等编辑器) 四.页面兼容:调试兼容问题(Chrome开发者工具,IE各版本) 五.脚本:用js实现页面的效果交互及数据交互(sublime等编辑器) 六.页面兼容:调试兼容问题(Chrome开发者工具,IE各版本) 七.上线:给后端套页面或发布上线

前端学习记录

总结一下这几天跟前辈学的新知识: 1.吸顶效果,普通的做法是在onscroll函数中监听滚动距离,如果滚动超过导航条高度,则将导航条的class添加.fixed.但是ios6+设备下的浏览器会在页面滚动的时候暂停所有js的执行,包括setTimeout和setInterval,onscroll也不会执行,只有在滚动停止时才会继续执行js. 解决办法: position:sticky可支持ios6+,但是完全不支持.在实现该效果时需要先判断用户的浏览器,如果为安卓则使用onscroll进行判断.f

前端学习(24)~js学习(二):变量

字面量:数字和字符串 “字面量”即常量,是固定值,不可改变. 字面量有3种: 数字 字符串 布尔字面量 (1)数值的字面量非常简单,写上去就行了,不需要任何的符号. alert(886); //886是数字,所以不需要加引号. (2)字符串的字面量也很简单,但一定要加上引号.可以是单词.句子等.例如: console.log('886'); console.log('千古壹号,永不止步'); 温馨提示:100是数字,"100"是字符串. (3)布尔字面量举例: if (true) {

前端学习(26)~js学习(四):基本数据类型vs引用数据类型

在上一篇文章中,我们介绍过,变量有以下数据类型: 基本数据类型(值类型):String 字符串.Number 数值.Boolean 布尔值.Null 空值.Undefined 未定义. 引用数据类型(引用类型):Object 对象. 本文,我们针对这两种类型,做进一步介绍.我们先来看个例子. 基本数据类型举例: var a = 23; var b = a; a++; console.log(a); // 打印结果:24 console.log(b); // 打印结果:23 上面的代码中:a 和

前端学习(25)~js学习(三):变量的数据类型

变量的数据类型 为什么需要数据类型 在计算机中,不同的数据所需占用的存储空间不同,为了充分利用存储空间,于是定义了不同的数据类型.而且,不同的数据类型,寓意也不同. JS 的变量数据类型,是在程序运行的过程中,根据等号右边的值来确定的.而且,变量的数据类型是可以变化的.比如说: var name = 'qianguyihao'; name = 123; // 强制将变量 name 修改为 数字类型 JS中一共有六种数据类型 基本数据类型(值类型):String 字符串.Number 数值.Boo

前端学习(33)~js学习(十):函数

关于函数的核心内容: 函数有哪几种定义和调用方式 this:函数内部的 this 指向.如何改变 this 的指向. 函数的严格模式 高阶函数:函数作为参数传递.函数作为返回值传递 闭包:闭包的作用 递归:递归的两个条件 深拷贝和浅拷贝的区别 函数的介绍 函数:就是将一些功能或语句进行封装,在需要的时候,通过调用的形式,执行这些语句. 函数也是一个对象 使用typeof检查一个函数对象时,会返回function 函数的作用: 将大量重复的语句抽取出来,写在函数里,以后需要这些语句的时候,可以直接