dom | 易学教程

优化网站设计（十九）：减少DOM元素的数量

阅读更多关于优化网站设计（十九）：减少DOM元素的数量

前言网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html ，同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/ 我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。准备工作为了跟随我进行后续的学习，你需要准备如下的开发环境和工具 Google Chrome 或者firefox ，并且安装 Yslow这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。 https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh https://addons.mozilla

浏览器面试题总结

阅读更多关于浏览器面试题总结

1. 你对浏览器的理解？浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。 HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的组织。但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。简单来说浏览器可以分为两部分，shell 和内核。其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。 2. 你对浏览器内核的理解？主要分成两部分：渲染引擎和 JS 引擎。渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展

标准 DOM 盒模型与 IE 盒模型

阅读更多关于标准 DOM 盒模型与 IE 盒模型

包括四个部分：margin>border>padding>content 在标准DOM盒模型中，dom 的 width 和 height 仅作用于content （IE6 及早期版本的IE7 下 width 和 height 包括了 border 和 padding）因此，一个html元素占据的空间不是width和height，而是这四个部分的加总，另外，由于margin没有内容无法看到(相邻元素都有margin时，你无法凭肉眼确定 dom 占据范围的边界)，如果你设置了border，那么肉眼所见的 DOM 形状就是border>padding>content三项的加总，但是，所占据的空间仍是四项的加总。使用标准盒模型的文档渲染模式有: document.compatMode = "CSS1Compat" 非标准模式(quirke) 下： document.compatMode = "BackCompat" 为了使用 IE 浏览器使用标准模式，可以使用下面的做法： 1、添加文档声明 <!DOCTYPE html> 2、 < meta http-equiv="X-UA-Compatible" content=" IE =edge, chrome=1"> outline 属性：盒模型的outline属性是包围在border外面的边线，设置方法跟border一样

Can two html elements have the same id but in different classes?

阅读更多关于 Can two html elements have the same id but in different classes?

问题 I was writing a javascript for an existing application in which there are two forms with separate id s, and in each form there is a div which has the id "validationSummary" . But these div s belong to different classes. So my question is can this be possible? Please anyone can explain me is this correct ? These are the div s: <form id="foo" .....> <div class="notice_bar validation-summary-errors error_message" id="validationSummary"></div> </form> <form id="bar" .....> <div class="validation

【前端】jquery基础学习

阅读更多关于【前端】jquery基础学习

jQuery引入下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。 jquery对象和dom对象 jquery找到的标签对象称为 -- jquery对象原生js找到的标签对象称为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jquery对象的方法 jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换: jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0] dom对象转jquery对象 -- $(dom对象) jQuery选择器基本选择器 jQuery('#d1') -- $('#d1') 基本选择器（同css）　　　　　　id选择器： $("#id") #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容　　　　　　标签选择器： $("tagName") $('div') 　　　　　　class选择器： $(".className") 　　　　　　配合使用： $("div.c1") //

js中的DOM节点操作---增删改查

阅读更多关于 js中的DOM节点操作---增删改查

1.查找 DOM1： getElementById(),getElementsByTagName() DOM扩展： querySelector()（返回第一个匹配的元素）,querySelectorAll()（返回全部匹配的元素） HTML5： getElementsByClassName() 2.插入 appendChild()：末尾插入 insertBefore()：特定位置插入 3.替换 replaceChild()：接受两个参数，第一个为要插入的节点，第二个为要替换的节点 4.删除 removeChild() 实例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dom节点操作</title> </head> <body> <ul id="list"><li>1</li><li>2</li><li>3</li></ul> <button id="add">插入</button> <button id="replace">替换</button> <button id="remove">删除</button> <script > var list=document.getElementById('list'); var add=document.querySelector('#add');

原生DOM操作方法小结

阅读更多关于原生DOM操作方法小结

1.0 DOM结构父节点兄弟节点当前节点属性节点子节点兄弟节点一般任意一个节点我们都会从父节点，子节点，以及兄弟节点的角度去考察。节点一般我们只需关注元素节点，属性节点及文本节点即可。 1.2 节点的相关属性（只读的） 1.2.1 nodeType 属性规定节点的 nodeType = 1 元素节点记住 nodeType = 2 属性节点记住 nodeType = 3 文本节点记住 nodeType = 8 注释节点 nodeType = 9 文档 nodeType = 11 document.fragment 1.2.2 nodeName 属性规定节点的名称元素节点 nodeName = 标签的名称 console.log(elementNode.nodeName); //会将标签名大写打印出来文本节点 nodeName = #text console.log(textNode.nodeName); //#text 属性节点 nodeName = 属性的名称 console.log(attrNode.nodeName); //attr name 1.2.3 nodeValue 属性规定节点的值。元素节点 nodeValue = null; 文本节点 nodeValue = 文本的内容属性节点 nodeValue = 属性的值 2.0DOM操作增删改查

day16 css, dom

阅读更多关于 day16 css, dom

一 HTML 　　一大堆的标签:块级\行内二 CSS 　　页面布局　　　　主站: 　　　　　　<div class='pg-header'> 　　　　　　　　<div style="width:980px;margin:0 auto;"> 　　　　　　　　　　内容自动居中　　　　　　　　</div> 　　　　　　</div> 　　　　　　<div class='pg-content'></div> 　　　　　　<div class='pg-footer'></div> 　　后台管理布局: 　　　　position: 　　　　　　fixed --永远固定在窗口的某个位置　　　　　　relative　　--单独使用无意义　　　　　　absolute　　--第一次定位可以在指定位置,滚轮滚动后位置改变　　　　a. 上下内容不动,左右内容滚动　　　　b.上下左内容不动,右侧内容滚动　　　　 ps：img style-“border-radius：50%”设置为圆形边框　　　　　　　　style里边可以叠加限定为某类标签添加属性　　　　图标可使用font-awesome来在线使用; 　　　　通过以下代码可以实现div下的子标签改变属性　　.item:hover .b{ 　　 background-color: green;　　　　display: block;　　}

JS加强学习-DOM学习05

阅读更多关于 JS加强学习-DOM学习05

7.6 移除节点 removeChild() 是将父元素中的某个子节点移除掉；这个为彻底移除。 7.7 插入节点 insertBefore 不同于appendChild()，appendChild()为将指定的元素剪切至对象所有子元素的最后。而insertBefore(,)是将指定的元素插入到某个位置之前，第一个参数为指定的元素，第二个参数为父元素中某个子元素的位置，指定元素会插入到第二个参数位置之前。 8. JS设置样式 8.1 JS设置样式的两种方式 style：逐条获取样式属性，逐条改变对应样式。 className：只能获取页面通过style设置的类名，无法获取外联式引入的。当然我们需要改变的样式较少时可以直接通过style的方式改变，可是如果样式较多就可以先在页面style标签中取个类名将所有的样式放在这个类名下，然后使用className的方法来调用这个类名。 8.2 JS设置样式时常有的style属性： backgroundColor：设置背景颜色 backgroundImage：设置背景图片 color：设置字体颜色 width：设置元素宽度 height：设置元素高度 border：设置元素边框 opacity：透明度设置取值范围为0-1，IE8及以前版本的只支持filter：alpha(opacity=XX);XX为0-100之间的值。总结：由于JS中不识别

day15 CSS JS DOM初探

阅读更多关于 day15 CSS JS DOM初探

居中 line-hight 是上下 text-line 是左右实现一个返回顶部的功能： 1 先写好CSS 2 写动作JS 写一个悬浮菜单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ margin: 0 auto; height: 48px; width:980px; background-color: aquamarine; color: coral; position: fixed; top: 0; left: 20px; right: 20px; line-height: 48px; text-align: center; } .pg-body{ margin: 0 auto; background-color: #dddddd; width:980px; height: 5000px; margin-top: 50px; } </style> </head> <body> <div class="pg-header">此处为菜单</div> <div class="pg-body">此处为内容</div> </body> </html> 效果：上下滚动菜单始终固定在顶部实现一个点赞按钮的效果： <

订阅 dom