dom对象

JavaScript----DOM

萝らか妹 提交于 2020-01-13 03:48:20
一、DOM DOM定义 DOM全称:Document Object Model 文档对象模型。 JS中通过DOM来对HTML文档进行操作。 文档: 表示的就是整个HTML网页文档; 对象: 表示将网页中的每一个部分都转换为了一个对象; 模型: 使用模型来表示对象之间的关系,这样方便我们获取对象。 二、节点 节点定义 节点(Node)------构成HTML文档最基本的单元。 常用节点分为四类: 文档节点:整个HTML文档; 元素节点:HTML文档中的HTML标签; 属性节点:元素的属性; 文本节点:HTML标签中的文本内容。 三、事件 事件的简介 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 比如:点击按钮,鼠标移动,关闭窗口… 我们可以在事件对应的属性中设置一些js代码,这样当事件被触发时,这些代码就会执行。 注意:js和html代码不要写在一起,这种写法我们成为结构和行为耦合,不方便维护,不推荐使用。 四、文档的加载 注意: 浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象。 解决方法: 1.将js标签写到下面; 2.将js标签写上面但是要加一个window.οnlοad=function(){}

JS之 调试

怎甘沉沦 提交于 2020-01-12 04:51:06
今天跟大家分享下JS之 调试的知识。 前言 Web开发最常用的高度就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。适当使用这些方法可以使调试更容易,更快速,更直观。 1 console.log() 在console.log 中有很多人们意想不到的功能。虽然大多数人使用 console.log(object) 来查看对象,但是也可以使用 console.log(object, otherObject, string),它会把它们都整齐地记录下来,偶尔也会很方便。 不仅如此,还有另一种格式化的: console.log(msg, values),这很像 C 或 PHP 中的sprintf。 console . log ( 'I like %s but I do not like %s.' , 'Skittles' , 'pus' ) ; 会像你预期的那样输出: > I like Skittles but I do not like pus . 常见的占位符 %o (这是字母o,不是0),它接受对象,%s 接受字符串,%d 表示小数或整数。 另一个有趣的是 %c,这可能与你所想不太相同,它实际上是CSS值的占位符。使用%c占位符时,对应的后面的参数必须是CSS语句

bom and dom

…衆ロ難τιáo~ 提交于 2020-01-12 00:49:46
bom:Broswer Object Model: 浏览器对象模型 - navigator: 获取客户机的信息(浏览器的信息) document.write(navigator.appName); - screen:获取屏幕的信息 document.write(screen.width + "<br />"); document.write(screen.height); - location:请求url地址 - href属性 //获取当前到请求的url地址 document.write(location.href); //设置URL地址 function href(){   location.href = "http://www.baidu.com"; } - history:请求的url的历史记录 window:窗口对象,顶层对象(所用的bom对象都是在window里面操作的) 相关方法: - window.alert():警告框,显示内容。简写alert() - confirm():确认框 - var flag = window.confirm("显示的内容"); 1 //confirm():确认框 2 var flag = window.confirm("是否删除"); 3 if(flag==true){ 4 alert("删除成功") 5 }else{ 6 alert(

Vue.js之render函数基础

强颜欢笑 提交于 2020-01-11 07:03:09
刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客 vue.js之绑定class和style (2016-10-30)已经过去一年零两天。这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公司的普通码农。发过一次烧,搬了两次家,没攒下什么钱。好,牢骚发到这里,接下来谈谈传说中接近Vue底层的api==render函数。 一枚硬币的两面 很久很久以前,前端的数据和视图居住在一起,在强大的jQuery的管理下,他们相处的还算可以。但是随着页面越来越复杂,DOM树的节点越来越多,数据夹杂在DOM中变得越来越难于管理。于是一声炮响,迎来了数据驱动视图的MVVM框架,数据和视图被一条天河划分开来,整个页面的数据状态开始变得整洁起来。而连接数据视图的鹊桥是虚拟DOM,关于虚拟DOM参看 全面理解虚拟DOM,实现虚拟DOM 。构成DOM的每一个节点在Vue中被称为vnode。(这段不严谨,大胆假设没求证) 在我们生成真实的DOM结构时,可以写一个HTML文件描述文档结构交给浏览器去解析,同时也可以通过DOM 的api innerHTML告诉浏览器结构是什么,还可以用createElement来构建DOM树,以喜闻乐见的hello world为例,html和innerHTML api 对DOM结构的描述都是 <h1>hello world</h1>

VueJS入门

只愿长相守 提交于 2020-01-11 06:57:40
一、VueJS概述与快速入门   1.1 介绍   一个构建数据驱动的web界面的渐进式其框架,Vue.js的目标提供尽可能简单的API就可以满足我们的日常开发,官网:https://cn.vuejs.org/。学习此框架需要有HTML、CSS和JavaScript的一些基础。   1.2 MVVM模式   MVVM是Modle-View-ViewModel的简写,是MVC的改进版。MVVM就是将其中View的状态和行为抽象化,让我们将视图(html和dom元素)和业务逻辑分开,分开后我们直接曹组模型数据就等同于html的dom元素。   MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)。   Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库,专注于View层。它的核心是MVVM中的VM,也就是ViewModle。ViewModel负责连接View和Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。   1.3 VueJS快速入门   首先需要在官网上下载一个vuejs的文件,这个自己操作一下,接着创建一个html文件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入门<

JavaScript笔记--DOM

家住魔仙堡 提交于 2020-01-11 01:18:27
DOM的使用 问:1 DOM如何表示组成网页文档的对象?如何使用DOM对象在页面中移动对象? DOM 文档对象模型,它是JavaScript在网页文档中引用对象的方式。 理解DOM DOM用对象来表示页面中的每个容器及其内容,这些对象以树状结构排列,document 对象是树根,每个文本标题,段落等元素是树的叶子。 document: 1 html 1.1 head 1.2 body 1.1.1 title 1.2.1 h1 1.2.2 p 节点 文档中每个容器或元素都被称作是DOM中的一个节点。脚本经常需要引用节点, 这可以通过指定ID. document对象是其他对象的父对象,它本身没有父对象。html对象是head和body对象 的父对象。h1和p对象是body对象的子对象。 文本节点工作方式稍有不同,段落中实际文本本身是一个节点,同时也是p对象的子 对象。同样,<h1>标签中的文本是h1对象的子对象。 head和body对象是html对象的兄弟对象。 利用<div>(或span)标签,可以高效地创建一个层(或者可以作为一个组来控制的 一组HTML对象) 设定溢出属性 overflow指明元素内容超出元素边界时,超出部分是被裁掉,还是用滚动条显示。 可以选择:visible 显示 hidden scroll auto inherit clip 指定项目的裁剪框

react入门系列之react特点归纳

痞子三分冷 提交于 2020-01-10 14:59:44
### 声明式开发 - 命令式开发:原生js和jq写代码的时候,大部分代码都是在操作dom,这种开发模式就是命令式开发。 - 声明式开发:react是面向数据编程,不需要直接去控制dom,你只要把数据操作好,react自己回去帮你操作dom,可以节省很多操作dom的代码。这就是声明式开发。 ### 可以和其他框架并存 - react所控制的dom就是id为root的dom,页面上的其他dom元素你页可以使用jq等其他框架。所以react是可以和其他框架并存的。 ### 组件化 - 在我们写todo-list的时候,我们已经使用react的组件了。通过继承react的Component去创建一个组件。 ### 单向数据流 - react是单向数据流,父组件传递给子组件的数据,子组件能够使用,但是不能直接通过this.props修改。否则会报错。(cannot assign to read only property ‘xxx’ of object ‘#object’) - 子组件要传值给父组件,或者要修改父组件的代码,都是要通过父组件传递过来的方法去实现。 - 这样的好处在于,让数据清晰代码容易维护,如果每个子组件都能直接修改父组件的数据,当子组件躲起来代码维护起来很麻烦。 ### react是视图层框架 - 结合上面讲的单向数据流,如果是大型项目,非常多的子组件

如何阅读别人的源码?vue源码阅读,读《vue.js技术揭秘》有感

旧巷老猫 提交于 2020-01-10 08:13:53
如何阅读别人的源码?vue源码阅读,读《vue.js技术揭秘》有感 Vue.js 技术揭秘 经过两章节的源码阅读发现:“反过来想就对了” vue框架主要做的是,用一种特定的dom书写方法,把标签转成js对象(虚拟DOM),再把虚拟DOM插入到HTML中,渲染成页面。 vue源码主要是围绕上面的“主题”来实现。(自顶向下) 先是架构,如何安排分解项目,把不同功能的功能低耦合拆分到不同类别的目录 项目初始化配置,逻辑实现。(牢记结果,一切操作是为了把 VNode 渲染到HTML) 倒数第二步,得到“最终”的结果的前一步准备,VNode 数据, 倒数第三步,想要获得 VNode 数据的前一步,是什么,做了什么 …… 越看到后面越明白,不明白的地方可先跳过,抓主干,走完流程,回头补细节 小结 总的来说是,从“前”往后看结果,从“后”往前看过程,我把这个过程称为“双向相对阅读” 来源: CSDN 作者: 追求者2016 链接: https://blog.csdn.net/example440982/article/details/103889074

漫谈网站优化提速

十年热恋 提交于 2020-01-08 09:22:30
漫谈网站优化提速 前几天的一个晚上,在和一个偶然认识的小白,聊了半个晚上的网站加速的事情,总觉自己最后没有讲清楚,固有此文产生。 本篇文章只涉及前端优化,暂不涉及后端操作,默认后端能抗住所有访问,算力无限大,响应时间无限小。因为加上后端的话,这个命题不是短短的几篇文章搞的定的,大多数都要依据具体的业务来确定。 本文涉及到的浏览器为Chrome浏览器,不具有统一性,仅供参考使用。 用户和网站的交互是通过浏览器来完成的,要谈前端优化,那么,我们就要搞清楚,从用户输入了一串url以后,浏览器到底做了什么。 1. 浏览器如何打开一个网页 这里我们先不考虑路由寻址的事情,后面我们再细细道来,在Chrome浏览器中先打开F12,打开network,可以看到一个网站从输入url到页面显示,具体发送了多少请求。我们以百度为示例,看一下: 首先第一行,可以看到浏览器请求了百度这个页面的主题文件HTML,当浏览器收到这个HTML之后,浏览器和这个页面的缘分,就此开始。 1.1 浏览器渲染流程 用户请求的HTML文本(text/html)通过浏览器的网络层到达渲染引擎后,渲染工作开始。每次通常渲染不会超过8K的数据块,其中基础的渲染流程图: webkit引擎渲染的详细流程,其他引擎渲染流程稍有不同: 渲染流程有四个主要步骤: 解析HTML生成DOM树 - 渲染引擎首先解析HTML文档,生成DOM树

不难懂--------react笔记

試著忘記壹切 提交于 2020-01-08 05:28:51
在jsx中不能使用class定义类名 因为class在js中是用来定义类的 定义类名的时候用className label中的for必须写成htmlFor ReactDOM.render: 参数1:需要渲染的dom元素或者组件 参数2:需要将渲染好的元素挂载在哪个挂载点身上 参数3:回调 成功的回调 React中如何创建一个组件 通过class类的方式来创建一个组件 class 组件名称 extends React.Component 注意:这个组件中必须要写一个render函数 函数中必须返回一个jsx语法 插槽作用: 插槽即:ReactDOM.createPortal(child, container) ,由ReactDom提供的接口。 可以实现将子节点渲染到父组件DOM层次结构之外的DOM节点。 第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 片段(fragment)。第二个参数(container)则是一个 DOM 元素。 应用场景: 对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式,但你需要子组件能够在视觉上 “跳出(break out)” 其容器。例如,对话框、hovercards以及提示框。所以一般react组件里的模态框,就是这样实现的~ React.Component: