dom对象

jquery获取、改变元素属性值

混江龙づ霸主 提交于 2020-01-20 20:39:00
/标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。 //==================================操作元素属性================================== //返回元素指定属性值 var txt1_val=$("#txt1").attr("value"); //通过元素的DOM属性名更改DOM属性值 $("#txt1").attr({ value : "txt1_value" , className : "txt1_class" }); //通过指定元素属性改变元素属性值 $("#txt1").attr("class","txt1_class2"); //给指定元素属性赋值,通过后面捆绑的方法返回值 $("#txt1").attr("class",function(){ return "txt1_class3"; }) //移除指定的元素属性 $("#txt1").removeAttr("class"); 来源: https://www.cnblogs.com/huangcan/p/4735084.html

javaScript操作DOM对象

瘦欲@ 提交于 2020-01-20 00:36:00
1.理解DOM:   DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口。   怎么说,我从两个角度理解: 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口。 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙。   所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点,触摸Html每寸肌肤。(咳。。。) 3.认识JavaScript中的DOM编程接口: 上面说了html形成的dom树,接着说下通过js的dom编程接口去操作这棵dom树。 JavaScriptDOM操作的常用方法和属性:: 常用方法: 获取节点: document. getElementById (idName) //通过id号来获取元素,返回一个元素对象 document. getElementsByName (name) //通过name属性获取id号,返回元素对象数组 document. getElementsByClassName (className) //通过class来获取元素,返回元素对象数组(ie8以上才有) document.

JS 之 Bom/Dom/节点

吃可爱长大的小学妹 提交于 2020-01-19 22:19:31
一、什么是BOM? 浏览器对象模型 二、BOM中的顶级对象是什么? window 三、window下有哪些子对象? document location history navigator frames screen 四、如何实现跳转页面? window.location location.href 五、如何刷新页面? location.reload([true]) history.go(0) 六、window下方法 1. alert() : 警告框 2. confirm() : 选择框 3. prompt() : 提示输入框 4. open() : 打开一个新窗口 5. close() : 关闭当前窗口 七、计时器(延时器、定时器) 间歇性计时器: setInterval(函数,毫秒数) clearInterval() 一次性计时器: setTimeout(函数,毫秒数) clearTimeout() 八、什么是DOM? 文档对象模型 九、如何获取页面元素对象? 1. document.getElementById() 返回对象,失败,返回null 2. document.getElementsByTagName() 返回伪数组 3. document.getElementsByClassName() 返回伪数组,IE9以下不兼容 function byClassName(obj

原生js获取子元素

孤街浪徒 提交于 2020-01-19 19:03:39
获取子元素的方法有 //获取第一个demo类 dom = document.getElementsByClassName('demo')[0]; //获取父节点 dom.parentNode; //获取上一兄弟节点 dom.previousSibling; dom.nextSibling; //获取第一个子元素 dom.firstChild //最后一个元素 dom.lastChild //获取demo类下面的所有子元素 children = dom.childNodes; //因为浏览器会把dom节点下的空格 换行 文本都会当成一个元素 ,我们要找元素节点的话,只能把他们剔除 for(var i;i<children.length;i++){ if(children[i].nodeName == '#text'){ children.remove(children[i]); } }//这样我们可以选择我们想要的第几个子元素了 比如第二个元素 children[1] 备注: 可以console.log 查看对象属性 解决办法 来源: https://www.cnblogs.com/guiyishanren/p/12214757.html

如何理解虚拟dom

扶醉桌前 提交于 2020-01-18 18:51:21
一、DOM对象和JS对象的区别 DOM对象是浏览器提供的前端api,相对于DOM 对象,原生的 JavaScript 对象处理起来更快,而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来: var element = { tagName: 'ul', // 节点标签名 props: { // DOM的属性,用一个对象存储键值对 id: 'list' }, children: [ // 该节点的子节点 {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]}, ] } 上面js对应的html写法是: <ul id='list'> <li class='item'>Item 1</li> <li class='item'>Item 2</li> <li class='item'>Item 3</li> </ul> 因此,原生的DOM树可以用js对象来表示,反过来,js对象也可以构建出虚拟的DOM树。 “这就是所谓的

资深阿里程序员一一为你解刨Web前端知识体系结构

≡放荡痞女 提交于 2020-01-18 15:37:01
只要接触过前端,都会指导web前端的知识主要由三部分组成:分别为静态html,样式css,动态javascript(简称js)这三大部分组成。其三部分组成的一个体系的复杂程度不亚于其他一门技术的复杂程度。当然对于跟我一样厉害的那些web前端来说那就是小菜一碟,但是很多人都只学了表面,基础部分,很多重要的知识,深入部分都是被忽视了!其实这也就导致了部分前端开发工作者学了前端,但是却找不到工作,有工作但是工资少的现象! 现在为大家一一解刨Web前端知识体系结构,在阿里从事了6年的全栈,也是从前端慢慢成长过来的,也想跟很多小伙伴说一句:付出与收获是成正比的! TextOne:首先最最最基础的部分html部分 1、常见的BOM对象 BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM。 window窗口对象。它表示整个浏览器窗口,主要用来操作浏览器窗口。同时, window对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。 document 即文档对象,也是window对象的一个属性。整个HTML代码解析完以后,会生成一个由不同节点组成的树形结构,俗称DOM树

js知识点小结

你。 提交于 2020-01-18 03:16:54
文章目录 1、原始值和引用值类型及区别 2、判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor 3、类数组与数组的区别与转换 4、 数组的常见API 5、bind、call、apply的区别 6、new的原理 7、如何正确判断this(区别箭头函数) 8、严格模式与非严格模式的区别 9、原型和原型链 10、prototype与__proto__的关系与区别 11、继承的实现方式及比较 12、作用域和作用域链、执行上下文 13、闭包及其作用 14、深拷贝与浅拷贝 15、防抖和节流 16、Js事件绑定时,函数名加括号和不加括号区别 17、DOM常见的操作方式 18、 Array.sort()方法与实现机制 19、 Ajax的请求过程 20、JS的垃圾回收机制 21、JS中的String、Array和Math方法 22、addEventListener(DOM2级事件处理程序)和onClick()(DOM0级事件处理程序)的区别 23、立即执行函数 24、整个HTML解析过程与JS脚本解析和执行顺序 25、new和Object.create的区别 26、DOM的location对象 27、浏览器从输入URL到页面渲染的整个流程 28、跨域、同源策略及跨域实现方式和原理 29、浏览器的回流(Reflow

Vue面试题

回眸只為那壹抹淺笑 提交于 2020-01-18 02:44:44
1.Vue.js介绍 Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API; Vue.js是一个构建数据驱动的Web界面的库。 Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。 简而言之:Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。 2.什么是 mvvm? MVC MVP MVVM MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。 3.简述Vue的响应式原理 当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖

JQuery高性能优化

懵懂的女人 提交于 2020-01-18 02:04:22
使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大。 通常比较常用的选择器有以下几个: ID选择器 $("#id") 标签选择器 $("td") 类选择器 $(".target") 属性选择器 $("td[target='target']") 伪类选择器 $("td:hidden") 根据经验,我们应该知道这5种选择器的性能是依次下降的 测试html片段: <table width="98%" cellspacing="1" cellpadding="0" border="0" style="table-layout:fixed" id="mytable"> <tr> <td bgcolor="#aaaaaa" align="center" class="target" target="target" style="display:none;" id="target-td">e</td> </tr> </table> 测试结果 测试方案:对每个脚本执行1w次,统计3次运行结果的平均值 方案 IE6 IE7 IE8 IE9 chrome firefox opera safari $("#mytable td.target") 5150 5630 780 293 69 148 31 102 $("#mytable .target"

JavaScript操作DOM对象

佐手、 提交于 2020-01-17 16:01:13
1.JavaScript操作DOM分为三类:DOM Core(核心),HTML-DOM和CSS-DOM。 2.访问节点 (1)使用getElement系列方法访问指定节点 getElementById():返回id属性查找对象第一个的引用 getElementByName():带有指定名称name查找对象的集合 getElementByTagName():带有指定标签名TagName查找的对象的集合 (2)根据层次关系访问节点 parentNode 父节点 childNodes 子节点 firstChild 第一个子节点 lastChild 最后一个子节点 nextSibling 下一个节点 previousSibling 上一个节点 3.可兼容不同浏览器的element属性: firstElementChild 第一个子节点 lastElementChild 最后一个字节点 nextElementSibling 下一个节点 previousElementSibling 上一个节点 4.节点信息的属性: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) 节点类型 NodeType值 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 5.操作节点 (1)改变节点属性的方法: