最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 原文:http://www.cnblogs.com/liuxianan/p/javascript-dom-api.html 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node有element,text,attribute,comment,document等(所以要注意节点和元素的区别,元素属于节点的一种). Node有一个属性nodeType表示Node的类型…

[TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node有element,text,attribute,comment,document等(所以要注意节点和元素的区别,元素属于节点的一种). Node有一个属性nodeType表示Node的类型,它是一个整数,其数值分别表示相应的Node类型,具体如下: { ELEMENT_NODE: 1, // 元素节…

摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node有 element,text,attribute,comment,document 等(所以要注意 节点 和 元素 的区别,元素属于节点的一种). Node有一个属性 nodeType 表示Node的类型,它是一个整数,其数值分别表示相应的Node类型,具…

1. 原生 DOM 操作 vs. 通过框架封装操作. 这是一个性能 vs. 可维护性的取舍.框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护.没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作,它的实现必须是普适的.针对任何一个 benchmark,我都可以写出比任何框架更快的手动优化,但是那有什么意义呢?在构建一个实际应用的时候,你难道为每一个地方都去做手动优化吗?出于可维…

JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测 功能 版本号 说明 Core 1.0.2.0.3.0 基本的DOM,用于表现文档…

JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). 使用DOM来创建个表格,很繁琐[不推荐] window.onloa…

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo…

第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方…

摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQuery操作DOM元素. 操作DOM 这里我希望介绍的相对系统一点,而不是东一句西一句,所以把Java…

转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题.     前言 在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQ…

一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档:O(对象)可以理解为类似Window对象之类的东西,可以调用属性和方法,这里我们说的是document对象:M(模型)可以理解为网页文档的树型结构.1.节点加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构…

1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸如XML和HTML文档的标准.DOM是一个使程序和脚本有能力动态地访问和更新文档的内容,结构以及样式的平台和语言中立的接口. 在文档中一切皆对象,比如 html,body,div,p等等都看做对象,那么我们如何来点击某个盒子让他变色呢? DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档…

内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Model)即文档对象模型,是一种处理HTML和XML文件的标准API. DOM提供了对整个文档的访问模型,将文档作为一个树形结构,树的每个结点表示了一个HTML标签或标签内的文本项.DOM树结构精确地描述了HTML文档中标签间的相互关联性. DOM模型不仅描述了文档的结构,还定义了结点对象的行为,利用对象…

一般通过JS代码操作DOM结构,会触发浏览器进行页面渲染.所以要尽量减少DOM操作,避免频繁的页面渲染对性能造成影响. 如有以下场景:程序执行ajax请求,并根据请求结果动态添加列表项.常见的做法是循环遍历数据项,生成LI节点,插入页面中的UL节点中. 如果返回结果有一万项,则整个流程会触发一万次页面渲染,页面会出现明显的卡顿现象. 解决方案有三种: 1) 原生JS代码可以通过创建documentFragment,将所有的添加列表项的操作先在创建的fragment上进行,再将整个fragment…

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).…

一.节点层次属性 考虑空白符的相关层次关系属性: 1.childNodes属性 包含 2.parentNode属性 3.previouseSibling属性和nextSibling属性 4.firstChild属性和lastChild属性 不考虑空白符的相关层次关系属性: 1.children属性 2.childElementCount 3.firstElementChild 4.lastElementChild 5.previousElementSibling 6.nextElementSib…

补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大小并打印: var height=window.innerHeight;var width = window.innerWidth; document.write("<br/>"+"height"+height+",width"+widt…

//最新更新:2017-11-25 //现在可以通过更强大而快捷的方式为所有的HTMLElement元素的Dom操作扩展新的方法[注意事项:处理HTMLElemnt元素时,此法对IE-8无效] //原理:原型 (function(){ HTMLElement.prototype.remove = function(){ if(this.parentNode){ this.parentNode.removeChild(this); } } })(); //demo var div = docume…

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).…

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).…

原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o…

DOM:文档对象模型 --树模型文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西 一:window: 属性(值或者子对象):opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口. 方法(函数):事件(事先设置好的程序,被触发): 1.window.open("第一部分","第二部分","第三部分","第四部分"): 特征参数: 第一部分:写要…

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树.  Windows 对象操作 window.open() - 打开新窗口 window.close() - 关闭当前窗口 1.Windows.open("第一部分","第二部分","第三部分","第四部分") 第一部分:写页面地址      url 第二部分…

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. Windows 对象操作 window.open() - 打开新窗口 window.close() - 关闭当前窗口 1.Windows.open("第一部分","第二部分","第三部分","第四部分") 第一部分:写页面地址      url 第二部分:…

创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(document)里. 2.创建文本节点createTextNode()var value = document.createTextNode(“text”);创建一个文本节点,常用来往元素节点里添加内容,也不会自动添加到文档里.很多人知道innerHTML,不知道这个方法,这个添加的是静态文本,如果插入的内…

转载:https://www.haorooms.com/post/js_dom_api 前言 很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统.不能说是API,今天来系统总结一下! 节点查找API document.getElementById :根据ID查找元素,大小写敏感,…

转行学开发,代码100天——2018-04-19 1.通过JavaScript元素属性的操作 三种: window.onload =function(){ var oTxt = document.getElementById("txt"); var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ // oTxt.value = "asdgas"; //第一种 /…

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档(HTML文档),对象是指文档中每个元素:模型是指抽象划的东西. 2.Windows对象操作 一.属性和方法 属性(值或者子对象) opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history历史记录,location地址栏,document,status状态栏,menubar菜单栏,toolbar工具栏等 方法…

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).…

DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象:M(模型)可以理解为网页文档的树型结构. DOM 有三个等级,分别是 DOM1.DOM2.DOM3,并且 DOM1 在 1998 年 10 月成为W3C 标准.DOM1 所支持的浏览器包括 IE6+.Firefox.Safari.Chrome 和 Opera1.7+. 1.节点 加载 HTML 页面时,Web 浏…