【DOM节点的使用（常用方法+代码）】的更多相关文章

使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test</div><script language="javascript">alert(document.getElementById("myid").innerHTML);</script></body></html&…

DOM节点的使用（常用方法+代码）

DOM节点的应用 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动编程 事件驱动编程的核心对象 常用事件 事件绑定的方式 6. DOM小例题 总结 学习总结 1. 什么是 DOM DOM 是 Document Object Model 文档对象模型的缩写.根据 W3C DOM 规范,DOM 是一种与浏览器,平台,语言无关的接口,可动态地修改 XML 和 HTML.…

是否是有效的dom节点--轮子代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>是否是有效的dom节点</title> <script type="text/javascript"> //是否是节点(body有效) function isNode(elem) { var ts = Object.prototype.toString; var…

DOM节点的属性和方法

DOM DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model).它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容).它只是一个接口规范,可以用各种语言实现.所以严格地说,DOM 不是 JavaScript 语法的一部分,但是 DOM 操作是 JavaScript 最常见的任务,离开了 DOM,JavaScript 就无法控制网页.另一方面,JavaScript 也是最常用于 DOM 操作…

DOM节点详解

@ 目录 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式: 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动编程 事件驱动编程的核心对象 常用事件 事件绑定的方式 6. DOM小例题 总结 学习总结 1. 什么是 DOM DOM 是 Document Object Model 文档对象模型的缩写.根据 W3C DOM 规范,DOM 是一种与浏览器,平台,语言无关的接口,可动态地修改 XML 和 HTML. D:…

深入理解DOM节点操作

× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法 前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的 下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错 <div id="myDiv"></div> &…

深入理解DOM节点类型第六篇——特性节点Attribute

× 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的一部分.本文将详细介绍该部分内容 特征 特性节点的三个node属性————nodeType.nodeName.nodeValue分别是2.特性名称和特性值,其父节点parentNode是null [注意]关于特性节点是否存在子节点,各个浏览器表现不一致 <div id="box"&g…

DOM 节点的克隆与删除

无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情况更多,这里不详细讲解,只说明大概过程. 问题那么多,主要出现在浏览器自身实现上,其中尤属legacy IE上—IE6,7,8. 在添加节点的API实现上,IE做了一个贡献,那就是insertAdjacentHTML函数被纳入HTML5规范上,这个函数在之前的文章中详细讲解并实现过,不提.此后,IE…

DOM节点属性

节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一.nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同2. 属性节点的 nodeName 是属性的名称3. 文本节点的 nodeName 永远是 #text4. 文档节点的 nodeName 永远是 #document 二.nodeVal…

第6章 DOM节点操作

一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box">节点</div>'); //创建一个节点 $('body').append(box); //将节点插入到<body>元素内部 二．插入节点 内部插入节点方法 append(content) 向指定元素内部后面插入节点 content append(function(…

通过DOM节点操作来获取表单信息

这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的信息,把用户的ID以及留言信息最后呈现在界面上的样子大概如下图(我的画图天赋真是杠杠滴) 没错就是这么酷炫的. 左侧是用户的ID 中间是用户留言内容 每个后面都有一个回复按钮 管理员点击回复之后 相应的留言框下部就会出现一个文本框,然后就可以愉快的回复了.对了还有一个回复发送以及删除功能.大概就是如…

关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 解决方案:event.preventDefault();//阻止浏览器默认事件即可 2.阻止浏览器默认事件之后发现这添加了滑动事件的dom节点上下滑动也失效,这是一个很坑爹的地方,如果你的活动dom节点占据了整块屏幕,也就是说你的页面上下动不了了: 解决方案:设置两个开关,分别对应左右滑动和上下滑动…

HTML DOM节点

在 DOM 树中,基本上一切都是节点.每个元素在最底层上都是 DOM 树中的节点.每个属性都是节点.每段文本都是节点.甚至注释.特殊字符(如版权符号 ©).DOCTYPE 声明(如果 HTML 或者 XHTML 中有的话)全都是节点.因此在讨论这些具体的类型之前必须清楚地把握什么是节点. 节点是-- 用最简单的话说,节点就是 DMO 树中的任何事物.之所以用 "事物" 这个模糊的字眼,是因为只能明确到这个程度.比如 HTML 中的元素(如 img)和 HTML 中的文本片段(如 &qu…

Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一.nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeName 是属性的名称 3. 文本节点的 nodeName 永远是 #text 4. 文档节点的 nodeName 永远是 #document 二.nodeV…

XML DOM 节点

来自:w3cschool菜鸟教程 在 DOM 中,XML 文档中的每个成分都是一个节点. DOM 节点 根据 DOM,XML 文档中的每个成分都是一个节点. DOM 是这样规定的: 整个文档是一个文档节点 每个 XML 元素是一个元素节点 包含在 XML 元素中的文本是文本节点 每一个 XML 属性是一个属性节点 注释是注释节点 DOM 实例 请看下面的 XML 文件(books.xml),代码如下所示: <?xml version="1.0" encoding="IS…

JavaScript DOM节点操作总结

节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属…

原生JS中DOM节点相关API合集

节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径   Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.nextSibling //返回紧跟在当前节点…

jQuery修炼心得-DOM节点的插入

1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中. append()和appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同,append()前面是要选择的对象,后面是要在对象内插入的元素内容,appendTo()前面是要插入的元素内容…

JavaScript学习笔记（三）——留言板知操纵DOM节点

用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户名+留言发布到下方的留言列表区域. 2.页面样式设计 样式很简单,就不上代码了. 3.使用JS实现留言功能 代码: function getMessage(){ var btn = document.getElementById("btn1"); //绑定发布按钮 var message…

[js高手之路]HTML标签解释成DOM节点

最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入. 首先,我们写个通用的html标签: <div onclick="test();" style=&…

JavaScript函数使用和DOM节点

一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值,....);②事件调用方式:再HTMl标签中,使用事件名="函数名()"<button ondblclick="saySth('按钮','yellow')">点击按钮,打印内容</button> 3.函数的注意事项:①函数名必须符合小驼峰法则!!…

获取DOM节点的几种方式

DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历 在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: document.getElementById();//id名,在实际开发中较少使用,选择器中多用class  id一般只用在顶级层存在 不能太过依赖id document.getElementsByTagName();//标签名 document.getElementsByClassName();/…

jacascript DOM节点——元素节点、属性节点、文本节点

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点主要提供了对元素标签名.子节点及属性的访问: 元素节点的三个node属性:nodeType:1.nodeName/TagName:元素的标签名大写.nodeValue:null(一般用在文本节点和属性节点): obj.nodeType 表示节点类型,有两种表示方法:数值或大写英文:但数值有兼容性问题…

JS中的DOM— —节点以及操作

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图…

将HTML字符转换为DOM节点并动态添加到文档中

将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 字符串转换为HTML DOM节点的基本方法及性能测试 2 动态生成的DOM节点添加到文档中的方法及性能测试 本文的示例: 有如下代码段 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&…

vue.js插入dom节点的方式

html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) var myBefore = Vue.extend({ template:'<p&g…

vue-获取dom节点

获取dom节点可以用ref属性,这个属性就是来获取dom对象的.看代码  这个属性就相当于给这个标签起了一个id样的东西 <input type="text" ref="userinfo" /> //获取ref定义的dom节点 console.log(this.$refs.userinfo); alert(this.$refs.userinfo.value); 还有另外一种方法  仅限于点击事件 <input @input="handle…

js学习总结：DOM节点二（dom基本操作）

一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称DOM是对HTML以及xml的标准编程接口. 继承树模型图: 1.document继承于HTMLDocument,而HTMLDocument继承于Document; 2.文本节点对象Text与注释节点对象Comment继承于CharacterData 3.在Element节点下其实存在两个子节点,除…

vue的数据双向绑定和ref获取dom节点

vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template> <div id="app"> {{msg}} <br> <input type="text" v-model="msg" ref="inp"/> //ref属性,是为了在model重获…

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…