操作DOM

A:更新DOM

1、innerHTML方法：修改一个DOM节点其全部的内容

2、innerText

3、textContent

innerText和textContent区别：读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent.

B:插入DOM

1、innerHTML方法：注意：innerHTML会直接替换掉原来的所有子节点，若当前节点不为空，不要用此方式

2、appendChild:结合createElement使用。注意：若要插入的节点已存在与当前的文档中，这个节点首先会从原先的位置删除，再插入到新的位置。

参考：http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014359940861047248456754f44e55919fe9370c723ae6000

时间： 2024-10-13 14:16:07

操作DOM的相关文章

mui项目中如何使用原生JavaScript代替jquery来操作dom

转载于:http://www.bcty365.com/content-146-3661-1.html 最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom

javascript操作dom对象

什么叫DOM? DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近. DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 查找元素 1.直接查找方法名描述 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素 getElementsByTagNam

原生JS与jQuery操作DOM有什么异同点？

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

操作DOM元素，Dom元素添加颜色，删除第二个li元素

<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添

Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法

此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并更改文档的内容.结构和样式. –其实DOM是一种通用的模型.不止在我们的HTML中存在,也可以在其他文件中存在,相信你最熟悉的就是XML了吧,其实还有很多... –DOM的发展也非常的漫长,版本延续,产生了0级DOM.1级DOM.2级DOM和最新的3级DOM,那么相对成熟的就是从2级DOM以后了.每

读Zepto源码之操作DOM

这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本本文阅读的源码为 zepto1.2.0 .remove() remove: function() { return this.each(function() { if (this.parentNode != null) this.parentNode.removeChild(this) }) }, 删除当前集合中的元素. 如果父

Javascript操作DOM常用API总结

Javascript操作DOM常用API总结原文地址:http://luopq.com/2015/11/30/javascript-dom/ 类型 Node类型(ELEMENT_NODE:1 ATTRIBUTE_NODE:2 TEXT_NODE:3 COMMENT_NODE:8``DOCUMENT_NODE:9 DOCUMENT_FRAGMENT_NODE:11) 节点创建型(createElement createTextNode cloneNode createDocumentFragme

解析JS操作DOM

首先,如何操作DOM可大致分为以下几项: 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("div"); var createTextNode = document.createT

jQuery操作Dom、jQuery事件机制、jQuery补充部分

jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要修改的属性,就会进行修改,如果没有,直接添加例:$("a").attr("href","http://www.baidu.com"); 修改多个属性值: //attr(obj) $(“img”).attr({ “title”: ”文件名称”, “s

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d