DOM常用的四大对象是什么? 一.总结 一句话总结: 1.关注结构,关注主干 2.从主干处着手的话,可以发现dom就是四个东西,document(文档),element,attribute,event(事件). 1.在 HTML DOM (文档对象模型)中,是否是每个部分都是节点? 解答:是 2.所有 HTML 属性都是是属性节点么? 解答:是 3.HTML的文档本身是什么节点? 解答:文档节点 4.HTML的注释是什么节点: 解答:注释节点 5.HTML文档怎么变成Document 对象? 解…

Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有…

12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2.1  文档初始化相关 —  evt属性 evt表示事件本身,可以通过evt获取与当前事件相关的信息,用户可以在script中定义响应函数,进行相应的处理.它与普通JavaScript脚本中的event基本相同,只不过在普通JavaScript的脚本中简…

创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标签名");        比如: var a=document.createElement("a");          html: <a></a>      2. 设置新元素的关键属性:        比如: a.href="http://tm…

<JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的部分好好消化一下的,下次看应该会容易多了吧~^_^~~先放上根据参考博文整理的思维导图,后期再根据自己的吸收加以更新和补充~…

本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用 一.appendChild: 向元素的内部最后面增加一个节点,或者移动一个现有的节点到元素的内部最后面 用法: someNode.appendChild( newNode ) someNode通常为元素的父节点 返回值: 返回新增加的节点 <input ty…

之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript DOM编程艺术>,就是他了,也看了好几遍了,做一点阶段性的总结吧!由于完全是基础知识,也就完全总结基础知识相关的吧! DOM选取元素: document.getElementById      通过id选取元素 document.getELmentsByTagName   通过标签名选取元素 docum…

1. 添加/删除 3步: 1. 添加一个空元素 var a=document.createElement("a"); <a></a> 2. 定义元素的关键属性 a.innerHTML="文本"; a.href="url"; <a href="url">文本</a> 3. 将新元素添加到DOM树 parent.appendChild(a)  在parent下子元素末尾追加a par…

基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有节点都继承自Node类型,都共享着相同的基本属性和方法. Node有一个属性nodeType表示Node的类型,它是一个整数,其数值分别表示相应的Node类型,具体如下: Node.ELEMENT_NODE…

文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有节点都继承自Node类型,都共享着相同的基本属…

文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有节点都继承自Node类型,都共享着相同的基本属…

一.getElementById() 寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点.如果不存在,这样的元素,它返回 null. 二.getElementsByName() 寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理.这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数. 三.getElementsByTagName() 寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,…

将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2.1  文档初始化相关 evt属性 evt表示事件本身,可以通过evt获取与当前事件相关的信息,用户可以在script中定义响应函数,进行相应的处理.它与普通JavaScript脚本中的event基本相同,只不过在普通JavaScript的脚本中简写成“e”. ownerDocument属性 通过引…

一.每个DOM节点都有一个nodeType属性,表示节点类型, NodeType一共有12种类型,我们可以通过遍历内置的Node构造函数获取 window.onload = function(){ var str = "<table>"; for( var key in Node ){ str += "<tr>"; str += "<td>" + key + "</td><td>…

一.常用的事件 onclick 点击事件 模态框实例 <input type="button" id="b1" style="width:50px;height:50px" onclick="display()"/> <!-- 背景层 --> <div id="d1" class="a1 hidden "></div> <!--背景层…

1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点,…

Node对象的节点类型***************************************************接口 nodeType常量 nodeType值 备注Element Node.ELEMENT_NODE 1 元素节点Text Node.TEXT_NODE 3 文本节点Document Node.DOCUMENT_NODE 9 documentComment Node.COMMENT_NODE 8 注释的文本DocumentFragment Node.DOCUMENT_FR…

在 DOM 树中,如果想要操作一个节点,那么首先要"查找"到这个节点.查找节点的方法由 Document 接口定义,而该接口由 JavaScript 中的 document 对象实现,你必须熟记它们(各大浏览器对它们的支持情况). 方法概览 getElementsById() getElementsByName() getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll() 一.通…

1.DOM外部插入after()与before() 节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系.之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里jQuery引入了2个方法,可以用来在匹配I的元素前后插入内容. 选择器 描述 .after(content) 在匹配选择器的每个元素之后插入内容(作为兄弟节点) .before(content) 方法在匹配选择器的元素之前插入内容(作为兄弟节点) before与a…

铛-今天又没啥事,来总结一下DOM的基础知识.(公司没活干我也很无奈…

DOM(Document Object Model ),文档对象模型,主要用于对HTML和XML文档的内容进行操作. 一.查找节点 直接获取标签 document.getElementById('i1'); //获取id为i1的标签 document.getElementsByTagName('div');//根据标签名称获得标签数组 document.getElementsByClassName('c1');//根据class属性获取标签的数组 document.getElementsByNa…

一.select对象 HEML中的下拉列表 属性: 1.options 获得当前select下所有option 2.options[i] 获得当前select下i位置的option 3.selectedIndex 获得当前选中的option的下标 4.size 设置或返回下拉列表中的可见行数. 5.length 返回下拉列表中的选项数目. 6.multiple 设置或返回是否选择多个项目. 7.id 设置或返回下拉列表的 id. 8.name 设置或返回下拉列表的名称. 方法: 1.add(新o…

总结:window对象 ● window.innerHeight - 浏览器窗口的内部高度 ● window.innerWidth - 浏览器窗口的内部宽度 ● window.open() - 打开新窗口 ● window.close() - 关闭当前窗口navigator对象navigator.appName // web浏览器全称navigator.appVersion // web浏览器厂商和版本的详细字符串navigator.userAgent // 客户端绝大部分信息navigator…

笔记: window对象 ● window.innerHeight - 浏览器窗口的内部高度 ● window.innerWidth - 浏览器窗口的内部宽度 ● window.open() - 打开新窗口 ● window.close() - 关闭当前窗口 navigator对象 navigator.appName // web浏览器全称 navigator.appVersion // web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 nav…

写了一个点击无缝滚动的demo,但是点击的时候如果上一个不运动完成,在快速点击就会快闪. 可是开始也清除定时器了,后来发现是传入的jq对象,jqobj.timer=定时器,这里jqobj没法添加.timer,所以每次清空也是徒劳,根本就没有添加上这个对象的属性. 用document,getElementById(‘obj’)获取的原生dom对象,就是可以添加上.timer属性,所以清除定时器也是成功的. 重点是最后 // ****************** // document.getEle…

一.删除行为前的提示 首先要有一个onclick的DOM(点击)事件,和一个JavaScript弹出框:confirm()确认框 <script> function del(){ var d = confirm("是否要删除[内容可变]");//返回基本类型的Boolean true或者false if(d) return true;//进行删除操作 else return false;//返回上一个操作 } </script> <br> <b…

创建节点:document.createElement(元素名), document.createTextNode(文本内容) 添加节点:parent.appendChild(newChild) 移除节点:parent.removeChild(child) 移动节点:获取要移动的节点及其要移动的位置,使用parent.insertBefore(newChild,oldChild) 查找节点:document.getElementById(id属性值), document.getElementsB…

二,Select:访问select元素 属性:.selectedIndex  获取select中当前选中项的下标 .options  获取select中所有的option元素 返回值为数组 .options.length  获取option的长度 将其赋值为0 等同于删除所有option .value 当前选中项的值(当选项中有value属性时 获得value属性值 若不存在value值则等同于获取innerHTML值) 方法:add() 在select中添加option remove(i) 删…

一个元素的子元素个数ParentNode.childElementCount 只读属性返回一个无符号长整型数字,表示给定元素的子元素数. 取消当前事件e.preventDefault();有时候我们选了一个checkBox,然后因为不能全部选中,就会取消此次点击事件. CSS属性选择器<input checkboxtype = "ddd">document.querySelector("[checkboxtype]")返回包含checkboxtype属性…

1.HTML DOM常用对象之Table:①创建:createTHead():createTBody():createTFoot():②删除:deleteTHead():deleteTFoot():③tHead下:insertRow(i):deleteRow(i):*(i相对与当前行分组的位置:):④rows-tr下:insertCell(i):deleteCell(i):⑤tBodies下:tBody:⑥tFoot下:insertRow(i):deleteRow(i):*(i相对于整个表中的位…