dom | 易学教程

Angular directive 实例详解

阅读更多关于 Angular directive 实例详解

准备代码，会在实例中用到 var app = angular.module('app', []); angular指令定义大致如下 app.directive('directiveName', function() { return { // config } }) 其中return返回的配置对象包含很多参数，如下一一说明。 1. restrict 值为字符串，可选参数，指明指令在DOM中以什么形式被声明  <directiveName></directiveName>  <div directiveName="expression"></div>  <div class="directiveName"></div>   默认值为 restrict: 'EA' ，表示可以在DOM里面可以用元素形式和属性形式被声明。一般来说，如果你想创建一个自己模板的组件时，则使用元素形式，但是仅仅是为已有元素添加功能的话，就使用属性名。如果想要支持IE8，则最好使用属性和类形式来定义，另外从angular 1.3.X开始，已经放弃支持IE8了。 2.

JavaScript DOM 事件模型

阅读更多关于 JavaScript DOM 事件模型

JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言，事件模型是 DOM 中至关重要的内容，理解事件驱动机制、事件反馈、事件冒泡、事件捕获以及事件委托能帮助我们更好的处理事件，写出更优的代码事件驱动机制当事件发生时，我们收到事件的反馈，在 JavaScript 中，事件反馈是我们自行定义的事件处理函数事件，如点击事件、鼠标移入事件等，是每一个元素与生俱来的能力通常说的绑定事件，实际上是绑定事件的反馈，即事件处理函数例如点击一个按钮，按钮元素对象是事件发送器或事件源，事件是鼠标点击事件，事件处理函数是侦听器元素对象发出事件，事件处理函数做出反应，这就是 JS 的事件驱动机制在观察者模式中，事件发送器就是主题，事件处理函数即侦听器就是观察者绑定事件反馈内联属性 <button onclick="test()">按钮</button> 介于结构和逻辑要相分离，不建议使用内联方式绑定事件句柄 var oBtn = document.getElementsByTagName('button')[0]; oBtn.onclick = function() { // this -> oBtn } 兼容性好，但是重复绑定会覆盖事件监听器 var oBtn = document.getElementsByTagName('button

移除DOM节点

阅读更多关于移除DOM节点

在IE中移除容器类节点，会引起内存泄露，最好是创建一个新的节点，比如div，然后将要删除的节点放入这个div中，再将div的innerHTML清空。其它的直接removeChild就可以了。 var removeNode = !+"\v1" ? function(){ var d; return function(node){ if(node && node.tagName != 'BODY'){ d = d || document.createElement('DIV'); d.appendChild(node); d.innerHTML = ''; } } }() : function(node){ if(node && node.parentNode && node.tagName != 'BODY'){ node.parentNode.removeChild(node); } } 移除节点 //--> */ /*--> */ 要去除的父元素子元素去除ddd元素检测ddd元素是否存在去除eee元素检测eee元素是否存在运行代码移除节点： xxx.removeChild(obj) xxx是所删除节点的父节点 xxx.removeNode(true) xxx是所要删除的节点来源： https://www.cnblogs.com/rubylouvre/archive

走进Javascript(一)

阅读更多关于走进Javascript(一)

Javascript 组成部分 ECMAScript + DOM + BOM 逐个释义 ECMAScript ECMA-262 定义，提供核心语言功能语法类型对象语句关键字保留字操作符 DOM Document Object Model 文档对象模型是针对 XML 但经过扩展用于 HTML 的应用程序编程接口（API，Application Programming Interface） DOM 把整个页面映射为一个多层节点结构 BOM Browser Object Model 浏览器对象模型如：浏览器弹窗 XHR对象 location screen navigator cookies 移动缩放窗口来源： https://www.cnblogs.com/pengsn/p/12617650.html

HTMLCollection与NodeList

阅读更多关于 HTMLCollection与NodeList

NodeList v.s. HTMLCollection 主要有两个方面不一样 1.包含节点的类型 2.使用方法 1.包含节点的类型不同(重要) (1)NodeList 一个节点的集合，既可以包含元素和其他节点(注释节点、文本节点等)。 (2)HTMLCollection 元素集合, 只有Element 2.使用方法相同点： 1）它们都有length属性 2）都有元素的getter，叫做item，可以传入索引值取得元素。 3）都是类数组不同点： HTMLCollection还有一个nameItem()方法，可以返回集合中name属性和id属性值的元素。（部分浏览器也支持NodeList的nameItem()方法）详细讲解涉及获取元素的主要API DOM最初设计是为了解析XML而设计的，之后沿用到HTML上。我们可以把DOM分为两部分 core 和 html,Core 部分提供最基础的 XML 解析API说明，HTML 部分专为 HTML 中的 DOM 解析添加其特有的 API。NodeList接口是在core中体现的，HTMLCollection则是在html部分，不同浏览器也会实现它们的不同接口。但是现在的dom标准已经不分core和html了，反映的是浏览器的实现（）。唯一要注意的是 querySelectorAll 返回的虽然是 NodeList

JavaScript DOM 常用尺寸

阅读更多关于 JavaScript DOM 常用尺寸

JavaScript DOM 常用尺寸 JavaScript 操作 DOM 时经常会用到一些尺寸，本文介绍怪异模式和标准模式下的滚动条距离、窗口尺寸、文档尺寸、元素文档坐标的兼容性写法以及窗口滚动到指定位置的方法怪异和标准模式浏览器在解析 CSS 时有怪异和标准两种模式，目的是为了向旧版本兼容标准模式下浏览器会按 w3c 规范解析代码怪异模式下按浏览器自身规范解析代码，一般会向后兼容 5 个版本首句使用 <!DOCTYPE html> ，则使用 HTML5 规范，即标准模式，不加这句则使用怪异模式使用 document.compatMode 返回 CSS1Compat 表示处于标准模式，返回 BackCompat 则为怪异模式滚动条滚动距离常见写法 // 获取滚动条和上侧/左侧的距离，即页面滚动距离 window.pageYOffset/pageXOffset document.bady.scrollTop/scrollLeft document.documentElement.scrollTop/scrollLeft window.scrollY/scollX 兼容性表 (b) 代表怪异模式，(s) 代表标准模式，C 代表 chrome，F 代表 firefox，O 代表 opera 浏览器 IE6789(b) IE678(s) IE9(s) C(bs) O/F

JavaScript—DOM编程核心.

阅读更多关于 JavaScript—DOM编程核心.

DOM Core常用部分: DOM方法创建节点:createElement(),createTextNode() 复制节点:cloneNode() 插入节点:appendChild(),insertBefore 删除节点:removeChild() 替换节点:replaceChild() 查找节点:getAttribute(),getElementById(),getElementsByTagName,hasChildNodes 设置节点属性:setAttribute() DOM属性节点的属性:nodeName,nodeType,nodeValue 遍历节点树:childNodes,firstChild,lastChild,nextSibling,parentNode,previousSibling 下面给出这部分的简要用法,做个索引似帮助文档 1.document.createElement(“节点名”):新建一个节点 2.document.createTextNode(“文本内容”):新建一个文本节点 3.节点.cloneNode(true|false):复制该节点,参数true则连同子结点一同复制,false则不复制子结点 4.节点.appendChild(子节点):在节点下添加子结点 5.父节点.insertBefore(新节点,参照点)

使用DOM技术操纵文档

阅读更多关于使用DOM技术操纵文档

我们知道，如果使用DHTML对象模型对文档的内容进行操纵，就必须了解相关文档元素的特殊属性和方法。因为文档的元素有很多种，相应的属性和方法也就非常多，为了实现一个功能，开发人员不得不查询许多资料。但是有了DOM技术，一切变得简单起来，那些操纵文档内容的属性和方法具备了元素无关性（element-independent）特点，这使得我们能够按照相同的步骤操纵文档内容。毋庸置疑，DOM技术为开发人员在对象层次上操纵文档提供了最便捷的手段。本文就为你全面介绍在JavaScript中如何使用DOM属性和方法操纵文档内容。使用data、nodeValue和src属性 DOM提供了2个属性用于修改文本节点的内容，它们是data和nodeVaule。2个属性实现的功能相同，语法是：object.data="new value"或者object.nodeVaule="new value"，其中object代表页面中的文本项节点。如果修改图形文件的内容，语法是：object.src="new value"，其中object表示页面中的img标记节点。来看看下面的例子： <HTML><HEAD><TITLE> DOM Demo </title></HEAD> <BODY ID="bodyNode"> This is the document body <P ID = "p1Node">This

DOM Access and Manipulation JS 操纵DOM

阅读更多关于 DOM Access and Manipulation JS 操纵DOM

　　JS 操纵DOM 有两种很简单的方式: 如果知道ID 的情况下. 我们可以使用 document.getElementById 我们还可以使用 document.getElementById("testId").textContent = "0"; document.querySelector(".testClass").classList.toggle("active"); 我们还可以把function赋值到event listener中. Ps: 这里是赋值, 而不是调用. 如果调用init, 应该是init() document.querySelector(".btn-new").addEventListener("click",init); function init() { console.log("HelloWorld!"); } 我们还可以生成click event handler 来监听click. document.querySelector(".btn-test").addEventListener("click", function() { console.log("HelloWorld!"); }); 我们可以在 MDN 查看到所有的event listener 事件来源： https://www.cnblogs.com/TheMiao/p

JQuery（DOM操作）

阅读更多关于 JQuery（DOM操作）

一、操作属性（一）获得属性值：属性值 = attr(属性名) var s = $("#<%=Button1.ClientID%>").attr("type"); （二）添加或修改属性值：attr("属性名","属性值") $("#Button1").attr("disabled","disabled"); （三）移除属性：removeAttr("属性名") $("#Button1").removeAttr("disabled"); 二、操作样式（一）直接操作内联样式性 1、获得样式:css("样式属性名") $("#Button1").css("font-style");　　 2、设置样式:css("样式属性名","样式属性值") $("#Button1").css("font-style","italic"); （二）操作class选择器 1、添加class:addClass("class名") $("#Button1").addClass("bb"); 2、移除class:removeClass("class名") $("#Button1").removeClass("bb"); 3、切换class:toogleClass("class名") $("#Button1").toggleClass("bb"); 三、操作内容（一）表单元素 1、赋值

订阅 dom