初识DOM
初识DOM
一、 节点的获取、插入、创建、删除、替换、修改文本节点
获取
1.document.getElementById
2.(element)document.getElementsByTagName
3.(element)document.getElementsByClassName
4.通过关系获取(可维护性差)
.parentNode .firstChild .lastChild .previousSibling .nextSibling
.firstElementChild .lastElementChild .previousElementSibling .nextElementSibling
插入
1.parent.appendChild(child)
2.target.parentNode.insertBefore(newElement,targetElement)
(PS:使用innerHTML插入节点将存在安全问题,建议仅用于与用户交互无关的情景)
创建
1.document.createElement(nodeName)
2.document.createTextNode(text)
删除
1.parent.removeChild(target)
替换
1.parent.replaceChild(new,old)
修改文本节点
(可修改该节点及其后代的所有文本内容)
1.element.textContent,IE9不支持
2.element.innerText,FF浏览器不支持
二、 属性操作
1.属性访问器
.className .htmlFor .value .disabled ...
element["id"]
特点:通用性低-名字异常、扩展性差、获取到的值是对象
object.getAttribute(attribute)
object.setAttribute(attribute,value)特点:无名字异常,通用性好,获取到的值为字符串
3.自定义属性("data-xxx").dataset.xxx
PS:xxx获取,忽略连接符"-",转为驼峰写法
三、 样式操作
1.标签内联样式
element.style.property="" (驼峰表示)
element.style.cssText="" (一条语句可完成所有样式,且不用驼峰表示)
2.更新class
element.className += " .new"
3.换肤
<link rel="stylesheet" type="text/css" href="xxx.css" id="style">
var style =document.getElementById("style");
style.href = "";
4.获取实际样式
window.getComputedStyle(element).property(IE9:element.currentStyle)
初识DOM的更多相关文章
- [DOM]初识DOM
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
- 初识DOM(文档对象模型)
什么是DOM 什么叫做DOM呢? • DOM的全称是Document Object Model 文档对象模型,DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. • D ...
- DOM 事件深入浅出(二)
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- js下 Day01、DOM对象,BOM浏览器对象模型
一.初识DOM 1.什么是DOM?为什么学习DOM 2.DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3.认识DOM实现了js和网页结合的 ...
- Javascript中String对象的的简单学习
第十一课String对象介绍1:属性 在javascript中可以用单引号,或者双引号括起来的一个字符当作 一个字符对象的实例,所以可以在某个字符串后再加上.去调用String 对象 ...
- Python 16 html 基础 jQuery & Javascript研究
基础内容 DOM操作 javascript探讨 JQuery初识 DOM innerText ==>获取仅文本 innerHtml ==>获取全部内容 <div id=" ...
- Web前端基础(11):JavaScript(五)
1. 初识DOM 1.1 DOM介绍 1.1.3 什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定 ...
- dom初识
1什么是dom document object model文档对象模型 是将整个页面文档封装成了一个对象,就是一个文档对象 整个页面就是一个文档,是由很多的节点组成的节点又包括三部分: 元素 属性 文 ...
随机推荐
- mysql数据库崩溃:InnoDB: Database page corruption on disk or a failed
修改mysql配置文件my.cnf,添加 innodb_force_recovery = 6 innodb_purge_thread = 0 重启mysql 这时只可以执行select,create, ...
- Html 常见meta
html 的meta标签对网页渲染及SEO搜索引擎起着不可忽视的作用.详细的写法一段时间不写,容易忘,所以整理了一下,方便需要时查看. <!DOCTYPE html> <!-- 使用 ...
- Vue2.5开发去哪儿网App 第三章笔记 下
1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class 例如: :class="{activated:isactivated}" 上面的语法 ...
- 本地主机不安装oracle客户端--访问远程oracle数据库
在不安装oracle客户端情况下用sqlplus连接数据库: 1.去官网下载 http://www.oracle.com/technetwork/topics/winx64soft-089540.ht ...
- 剑指offer十六之合并两个排序的链表
一.题目 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 二.思路 注:链表1和链表2是两个递增排序的链表,合并这两个链表得到升序链表为链表3. 首先分析 ...
- 不用函数库求一个数的平方根 (java版)
一.题目 编写程序求一个整数的平方根,精确到小数点后三位 二.解法 1) 采用 牛顿迭代法. 2)牛顿迭代法简介 假设方程 在 附近有一个根,那么用以下迭代式子: ...
- SQL Server 2016 需要单独安装 SSMS
默认安装完 MSSQL 后,不自带 SSMS 的管理工具了,需要的话可以单独安装,貌似更专业了一些. https://msdn.microsoft.com/library/mt238290.aspx ...
- 谈谈Linux下的数据流重定向和管道命令
一.标准输入.标准输出.错误输出概述 1.标准输入(stdin)是指令数据的输入,代码为0,使用<或者<<,默认是键盘. 2.标准输出(stdout)是指令执行成功返回的结果,代码为 ...
- mpvue图片轮播遇到的问题
小程序官方写法: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" i ...
- SpringBoot入门 (十三) WebSocket使用
本文记录在SpringBoot中使用WebSocket. 一 什么是WebSocket WebSocket是基于TCP协议的一种网络协议,它实现了浏览器与服务器全双工通信,支持客户端和服务端之间相互发 ...