dom对象

大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新…… github：https://github.com/Daotin/Web 微信公众号：前端队长 博客园：http://www.cnblogs.com/lvonve/ 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！ 前言 昨天收到一个朋友的留言反馈，意思是说文章太多，找起来很麻烦，做个索引页就好了。 这个建议特别好，于是下面就是整个 《从零开始学 Web 开发》 所有内容的索引，并且按照知识点的分类排列好，每一篇文章的主要内容也简单的列举出来。 本索引将长期不定期更新…… 索引 从零开始学 Web 之 HTML 从零开始学 Web 之 HTML（一）认识前端 什么是前端 网页组成 Web 标准 浏览器内核 认识 HTML HTML 结构标准 标签分类 开发工具 从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等 标签 超链接 特殊字符 列表 音乐标签 滚动标签 head里面相关 从零开始学 Web 之 HTML（三）表单 表格 表单 标签语义化 从零开始学 Web 之 CSS 从零开始学 Web 之 CSS（一）选择器 CSS概念 选择器 从零开始学 Web 之 CSS

inner text与inner html 共同点：都是用来操作标签内容。 inne rtext 把内容当文本来处理。 获取时：会把html标签舍弃掉只获取文本内容。 设置时：也不能识别标签，会把标签转换为实体字符。 inner text的兼容性 火狐老版本不支持inner text属性，支持text content。 IE6，7，8不支持text content。 inner html 获取时:能够同时获取到文本和标签。 设置时：也能识别设置标签。 兼容性解决法 获取时：先检测一下用inner能不能获取到，如果可以直接获取，如果不行用text content属性。 按照以上思路封装一个函数，需要时直接用就可以了。 function getInnerText(element){ //能力检测 if(typeof element.innerText==="string"){ return element.innerText; }else{ return element.textContent; } } function setInnerText(element,value){ //能力检测 if（typeof element.innerText==="string"）{ element.innerText=value; }else{ element.textContent=value

DOM: 文档对象模型( Document Object Model ,简称DOM) . DOM树 文档:一个页面就是一个文档，在DOM中使用document表示 元素:页面中的所有标签都是元素，DOM中使用element表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示 DOM以上内容都看做对象。 如何获取元素： 1根据ID获取 .getElementById() <div id="name">hellow world</div> <script> var name_div=document.getElementById('name'); console.log(name_div); </script> 2通过标签名获取 .getElementsByTagName() <ul> <li>A1</li> <li>A2</li> <li>A3</li> <li>A4</li> </ul> <script> var lis=document.getElementsByTagName('li'); console.log(lis); </script> 注意 ： 返回的值是以伪数组的形式来存储的，可以通过遍历的方式 来取出所有的元素对象 <ul> <li>A1</li> <li>A2</li> <li>A3</li> <li>A4</li> <

js操作DOM对象 （Document Object Model）文档对象模型 nodeType返回值 1：元素节点 2：属性节点 3：文本节点 8：注释节点 9: 文档节点 nodeName 节点名称 nodeType 节点类型 nodeValue 节点值 setAttribute("属性名","属性值") getAttribute("属性名") 根据属性名获取对应的属性值 getAttributeNode("属性名") 获取的是属性节点 createElement() 新增节点 insertBefore(newLi,li) 把newLi放在li之前 replaceChild(newLi,li)把newLi替换li的位置 removeChild()删除指定的子节点 parentNode 获取父节点 appenChild()追加子节点 通过js中的style属性可以为节点动态的增加css样式 style.属性名 之前css的属性名 background-color 现在属性名 backgroundColor className用来动态的给节点设置class属性！ tabs选项卡功能的实现 offsetLeft 返回元素左边距 到 父级的左边距 offsetTop 返回元素上边距 到 父级的上边距 offsetHeight 元素的高度 offsetWidth 元素的宽度

JS HTML DOM 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model)。 通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。 DOM文档操作 查找 HTML 元素 方法 描述 例子 document.getElementById(id) 通过元素 id 来查找元素 查找 id=“intro” 的元素：let myElement = document.getElementById(“intro”); document.getElementsByTagName(name) 通过标签名来查找元素 查找所有 <p> 元素: myElement = document.getElementsByTagName(“p”); document.getElementsByClassName(name) 通过类名来查找元素 查找包含 class=“intro” 的所有元素的列表:document.getElementsByClassName(“intro”); document.querySelectorAll(“tag.css_name”) CSS 选择器查找 HTML 元素 返回 class=“intro” 的所有 <p> 元素列表: let el=document.querySelectorAll(“p

一. BOM和DOM 　　JavaScript分为ECMAScript, BOM, DOM. 　　BOM( Browser Object Model )是指浏览器对象模型, 它使JavaScript有能力与浏览器进行交互. 　　DOM( Document Object Model )是指文档对象模型, 通过它,可以访问HTML文档的所有元素. 二. window对象 　　所有浏览器都支持window对象. 它表示浏览器窗口. 　　所有文档包含框架( frame或iframe标签 ), 浏览器会为HTML文档创建一个window对象, 并为每个框架创建一个额外的window对象. 　　没有应用于window对象的公开标准,不过所有浏览器都支持该对象. 　　所有JavaScript全局对象,函数以及变量均自动成为window对象的成员. 　　全局变量是window对象的属性,全局函数是window对象的方法. 　　一些常用的window方法 : 　　　　· window.innerHeight - 浏览器窗口的内部高度 　　　　· window.innerWidth - 浏览器窗口的内部宽度 　　　　· window.open() - 打开窗口 　　　　· window.close() - 关闭当前窗口 　　window 子对象 : 　　　　 1. navigator对象 　

前戏 到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。 也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。 JavaScript分为 ECMAScript，DOM，BOM。 BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。 window对象 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。全局函数是 window 对象的方法。 接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。 一些常用的Window方法： window.innerHeight

指令<AngularJs> 对于指令。能够把它简单的理解成在特定DOM元素上执行的函数，指令能够扩展这个元素的功能。 首先来看个完整的參数演示样例再来具体的介绍各个參数的作用及使用方法： angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, compile: // 返回一个对象或连接函数

一直都听说DOM很慢，要尽量少的去操作DOM，于是就想进一步去探究下为什么大家都会这样说，在网上学习了一些资料，这边整理出来。 首先，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。下面主要先介绍下这些浏览器行为，阐述一个页面是怎么最终被呈现出来的，另外还会从代码的角度，来说明一些不好的实践以及一些优化方案。 浏览器是如何呈现一张页面的 一个浏览器有许多模块，其中负责呈现页面的是渲染引擎模块，比较熟悉的有WebKit和Gecko等，这里也只会涉及这个模块的内容。 先用文字大致阐述下这个过程： 解析HTML，并生成一棵DOM tree 解析各种样式并结合DOM tree生成一棵Render tree 对Render tree的各个节点计算布局信息，比如box的位置与尺寸 根据Render tree并利用浏览器的UI层进行绘制 其中DOM tree和Render tree上的节点并非一一对应，比如一个display:none的节点就在会存在与DOM tree上，而不会出现在Render tree上，因为这个节点不需要被绘制。 上图是Webkit的基本流程，在术语上和Gecko可能会有不同，这里贴上Gecko的流程图，不过文章下面的内容都会统一使用Webkit的术语。

前言 在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作, 无论增删改查在前端页面操作这一范围内都是比较消耗性能的. 如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQuery操作DOM元素. 操作DOM 这里我希望介绍的相对系统一点,而不是东一句西一句,所以把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读.这里就总结出最基本最常用的DOM操作. Javascript: jQuery: 上面的思维导图分别是javascript和jQuery下操作DOM的一些常用Function,并不完全我仅仅列出相对常用的.这里我比较推荐的是jQuery的操作方式,更加便捷的同时在性能上也相对有所保障. 性能影响 DOM操作会导致最重要的,也是我们最需要的问题就是导致用户阻塞的重构(reflow)和重绘(repaint).比较通俗的一句话就是你在页面上的任何操作都是有代价的,有些大有些小,如果我们的操作比较频繁或者波及范围较大,那么就要讲究方式和技巧.reflow和repaint就是我们在改变页面或者说操作DOM时,会带来的两种后果. reflow意味着结构的改变,比如一堆元素堆叠,改变其中一个的宽高,那么相应的所有元素的位置都要改变