前端之DOM】的更多相关文章

前言: 昨天写了篇关于JavaScript的,今天写篇Dom的(插入4个实例),写完之后感觉知识点还不少~ 内容当然会用到[前端]:JavaScript的知识.下篇博客会写关于jQuery~~ 一.DOM介绍 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM编程:可以操作html所有的标签,进行找.操…
一.概念 javascript javascript是一种脚本语言,可以被浏览器解析,所以它可以称之为前端的三把利器之一. javascript跟java没有半毛钱关系. 声明局部变量:使用关键字var 应用场景:当Selenium定位不到元素时,就要使用js代码来定位了. Dom Document object model文档对象模型 它就是把死板的标签变成可以通过方法调用的对象,对象里面囊括了页面里的所有元素.功能. 通过Dom提供的调用方式,来操纵这个页面当中的元素.类似于对象,它可以调用…
推荐阅读:http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label3 BOM对象 window 对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使用即可. Window 对象方法 alert() 显示带有一段消息和一个确认按钮的警告框. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框.…
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 docu…
1.DOM访问与修改的优化: DOM访问是有代价的,修改DOM则会引起DOM的重绘与重排,而这两种操作会消耗性能. (1)缓存DOM:将频繁访问的对象或属性使用变量缓存起来,每次访问的时候,直接使用变量,而不是再次去访问DOM. (2)减少重绘与重排: 批量修改:使用文档片段documentFragment.使用类名一次性修改多个样式.或者使用CSSText属性 如 ele.style.cssText = 'color:red;border:1px solid green'; 元素脱离文档流,再…
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 一 查找元素 1.1直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 d…
老师的博客:https://www.cnblogs.com/liwenzhou/p/8011504.html DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. DOM标准规定HTML文档中的每个成分都是一个节点(node): 文档节点(document对象):代表整个文档 元素节点(element 对象):代表一个…
< 一 >  word  1,依赖于 jquery.html.word.js 插件 => https://blog-static.cnblogs.com/files/lovling/jquery.html.word.js 2,该插件依赖于 jquery,需要先引入 jquery , 使用方式如下 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&…
关于DOM操作的相关案例   1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding:…
关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 二.事件 JS是以事件驱动为核心的一门语言. 事件的三要素 事件的三要素:事件源.事件.事件驱动程序. 比如,我用手去按开关,灯亮了…