dom

Listen to undo/redo event in contenteditable div

阅读更多关于 Listen to undo/redo event in contenteditable div

问题 Is there a way to listen on all the ways a user could trigger an undo on a contenteditable div? For example when the user hits Control+Z, Right-click -> Undo, or in the file menu Edit -> Undo. I'm not looking for undo/redo algorithms or implementations, just the ability to listen to the event and overwrite the behavior. 回答1: Well, the Ctrl+Z/Y is possible, but I don't know about the Right-click->Undo/Redo part. $(document).keydown(function (e) { var thisKey = e.which; if (e.ctrlKey) { if

第三章 JavaScript 操作 DOM 节点

阅读更多关于第三章 JavaScript 操作 DOM 节点

目录第一节：JavaScript 处理 DOM 事件第二节：JavaScript 操作 DOM 节点第三节：JavaScript 修改 DOM 节点 CSS 样式 js处理dom事件： js操作dom节点： js修改DOM节点css样式：第一节：JavaScript 处理 DOM 事件第二节：JavaScript 操作 DOM 节点 1，JavaScript 修改 DOM 节点 2，JavaScript 添加 DOM 节点 3，JavaScript 删除 DOM 节点第三节：JavaScript 修改 DOM 节点 CSS 样式 dom节点： js 处理dom事件： <script type="text/javascript"> function fun1 (){ alert("点我干嘛！"); } </script> <head><body> <input type="button" value="点我一下" οnclick="fun1()" /> </body></head> js 操作dom节点： <script type="text/javascript"> function modifyDOM() { document.getElementById ("txt" .innerHtml ="用户名 : "); document.getElementById (

JS常用操作节点的方法

阅读更多关于 JS常用操作节点的方法

js常见的创建dom节点的方法有 createElement() 创建一个元素节点 => 接收参数为string类型的nodename createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容 createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称 createComment() 创建一个注释节点 => 接收参数为string类型的注释文本一、创建DOM节点使用的命令是 var oDiv = document.createElement('div'); 这样就创建了一个div标签。二、插入DOM节点移动DOM节点也就是把这个节点插入到html文档中的某个地方，这里js给了我们两个方法： 1.appendChild()：把节点插入到父节点的末尾。 document.body.appendChild(oDiv); //把div插入到body中，并且位于末尾 2.insertBefore()：把节点插入到父节点的某个兄弟节点的前面。 var oP = createElement('p'); //创建一个p节点 document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面三.删除DOM节点删除DOM节点的方法是removeChild()。

JS dom节点笔记

阅读更多关于 JS dom节点笔记

父节点： node.parentNode 获取子元素的父节点(得到的是离元素最近的父节点) 找不到返回null 代码： < div class = "box" > < div class = "erweima" > < div > < / div > var er = document . querySelector ( '.erweima' ) ; var box = er . parentNode ; 子节点（返回的是伪数组形式）节点内容 childNodes(标准) 返回所有的子节点（包含元素节点文本节点等等）实际开发使用少 children（非标准）返回子元素节点实际开发常用 children[0] 返回第一个子元素节点（伪数组的索引号） < ul > < li > < / li > < li > < / li > < li > < / li > < / ul > var ul = document . querySelector ( 'ul' ) ; var lis = ul . children ; 兄弟节点 1.nextSibling （返回所有的兄弟节点包含元素节点文本节点） 2.nextElementSibling （得到下一个兄弟元素节点兼容性问题 IE9以上支持） 3.previousElementSibling （得到上一个兄弟元素节点

开发小技巧之调试DOM

阅读更多关于开发小技巧之调试DOM

开发小技巧之调试移开消失的元素引言伪类增删className 增删DOM 总结引言大多数小伙伴都遇到过一种调试情况，想调试页面中的某个元素，查看该元素的样式或者其他信息。鼠标移上去的时候或者点击的时候存在，移开就消失了，以至于不能用选择页面元素工具查看。今天就来整理一下什么功能会出现这种情况，以及该如何调试这种情况的元素。伪类最常见的也是最普通的情况就是伪类，其中 :hover , :focus 是最常见的，很多菜单就是通过这两种伪类做的下拉悬浮，最不易察觉的样式是 :focus 伪类选择器中的样式。比如 chrome 中元素获取焦点的样式仔细看的话会发现， input 输入框在获取焦点时有个默认的 outline 外边轮廓，而图片中选择的 div.content 在勾选上 focus 伪类选择时也出现了一个蓝色的 outline 外边轮廓。正常情况下 div.content 是无法获取焦点的，所以我们很少见到，但是 input 输入框我们经常见到，有很多新手不知道这个默认的 outline ，想把这个样式修改又不知从何修改，而这里的 -webkit-focus-ring-color 指的是 chrome 获取焦点的颜色变量，从样式计算结果可以看到这个颜色值是 rgb(77, 144, 254) 。比如github的登录页输入框就用了 :focus

阅读更多关于 DOM

DOM Document Object Model 文档对象模型操作HTML的节点（HTML标签） DOM发展史 DOM0 DOM1 1998年 w3c推荐版本 DOM2 2000年 (主讲) DOM3 2004年（主讲） DOM4 2015年 1. 节点Node NodeName节点名字 NodeType节点类型 NodeValue节点值元素节点:ElementNode 标签名 1 null 文本节点:TextNode #text 3 文本内容属性节点:attributeNode 属性名 2 属性值 2. 快速查找节点 document get获取 Element元素 ById通过ID （1）通过ID值获取元素节点（ID唯一）格式： document.getElementById(ID值); 参数必须是字符串 let divEle = document.getElementById("F66"); console.log(divEle);//<div> （2）通过元素名称（标签名）获取元素节点 0到多个格式： document.getElementsByTagName(标签名称); let sectionEle = document.getElementsByTagName("section"); console.log(sectionEle[1]);//

VUE2中文文档：语法基础笔记

阅读更多关于 VUE2中文文档：语法基础笔记

声明式渲染 Vue.js 的核心是，可以采用简洁的模板语法来声明式的将数据渲染为 DOM： <div id="app"> {{ message }} //模板语法 </div> 　　 var app = new Vue({　　//新建vue实例（响应式） el: '#app',　　　　　　//挂载到#app data: { message: 'Hello Vue!'　　//数据 } }) 除了文本插值(text interpolation)，我们还可以采用这样的方式绑定 DOM 元素属性： <div id="app-2"> <span v-bind:title="message"> 　　　　//v-bind：属性=“数据” 鼠标悬停此处几秒，可以看到此处动态绑定的 title！ </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })　　由组件组合而成的应用程序在 Vue 中，一个组件本质上是一个被预先定义选项的 Vue 实例，在 Vue 中注册组件很简单： // 定义一个被命名为 todo-item 的新组件 Vue.component('todo-item', { template: '<li>这是一个

dom4j解析

阅读更多关于 dom4j解析

XML 解析概述当将数据存储在 XML 后，我们就希望通过程序获得 XML 的内容。如果我们使用 Java 基础所学习的旧知识是可以完成的，不过你需要非常繁琐的操作才可以完成，且开发中会遇到不同问题 ( 只读、读写 ) 。人们为不同问题提供不同的解析方式，并提交对应的解析器，方便开发人员操作 XML 。解析方式和解析器 DOM: 要求解析器把整个 XML 文档装载到内存，并解析成一个 Document 对象。 a) 优点 : 元素与元素之间保留结构关系，故可以进行增删改查操作。 b) 缺点 :XML 文档过大，可能出现内存溢出显现。 SAX: 是一种速度更快，更有效的方法。它逐行扫描文档，一边扫描一边解析。并以事件驱动的方式进行具体解析，每执行一行，都将触发对应的事件。 ( 了解 ) a) 优点 : 处理速度快，可以处理大文件 b) 缺点 : 只能读，逐行后将释放资源。 3 PULL: Android 内置的 XML 解析方式，类似 SAX 。 ( 了解 ) 解析器 : 就是根据不同的解析方式提供的具体实现。有的解析器操作过于繁琐，为了方便开发人员，有提供易于操作的解析开发包 l 常见的解析开发包 : JAXP: sun 公司提供支持 DOM 和 SAX 开发包 JDom:dom4j 兄弟 jsoup: 一种处理 HTML 特定解析开发包 dom4j: 比较常用的解析开发包，

python学习笔记十三 JS，Dom（进阶篇）

阅读更多关于 python学习笔记十三 JS，Dom（进阶篇）

JS介绍 JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用；JavaScript 是因特网上最流行的脚本语言。 JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。 1.存在方式  <script type"text/javascript" src="JS文件"></script>  <script type"text/javascript"> Js代码内容 </script> 2.存放位置 JavaScript脚本通常放置在三个位置： HTMlL中的head部分 HTML中的body部分最底部（推荐）单独以.js结尾的文件为什么会推荐放置在body部分的最底部？因为html是从上往下执行的，假设有js文件或者js执行耗时比较久的话，下面的html代码就无法执行了。所以放置在body代码块底部

XML的打包与解析

阅读更多关于 XML的打包与解析

XML的打包与解析一、XML语言的特点 1、XML独立于任何编程语言，允许人们按接收者容易解析的方式，对复杂数据进行编码。先来看一个简单的XML格式的文件： [XML] 纯文本查看复制代码 ? 1 2 3 4 5 6 < note > < to >George</ to > < from >John</ from > < heading >Reminder</ heading > < body >Don't forget the meeting!</ body > </ note > 对于程序员来说，很容易读懂这是什么意思，很明显这是传递给他人的一个便签，如果我们写出下面这样： George John Reminder Don't forget the meeting! 虽然最终从XML中提取出来就是上面的内容，但是我们从上面的内容根本看不出这是什么。 2、数据做成XML有助于改变其内容如果我们现在想再添加一项：时间。在XML中我们可以这样： [XML] 纯文本查看复制代码 ? 1 2 3 4 5 6 7 < note > < to >George</ to > < from >John</ from > < heading >Reminder</ heading > < body >Don't forget the meeting!</ body > < time

订阅 dom