初识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"]

特点:通用性低-名字异常、扩展性差、获取到的值是对象

  1. 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的更多相关文章

  1. [DOM]初识DOM

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  2. 初识DOM(文档对象模型)

    什么是DOM 什么叫做DOM呢? • DOM的全称是Document Object Model 文档对象模型,DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. • D ...

  3. DOM 事件深入浅出(二)

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  4. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  5. js下 Day01、DOM对象,BOM浏览器对象模型

    一.初识DOM 1.什么是DOM?为什么学习DOM 2.DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3.认识DOM实现了js和网页结合的 ...

  6. Javascript中String对象的的简单学习

    第十一课String对象介绍1:属性    在javascript中可以用单引号,或者双引号括起来的一个字符当作    一个字符对象的实例,所以可以在某个字符串后再加上.去调用String    对象 ...

  7. Python 16 html 基础 jQuery & Javascript研究

    基础内容 DOM操作 javascript探讨 JQuery初识 DOM innerText  ==>获取仅文本 innerHtml  ==>获取全部内容 <div id=" ...

  8. Web前端基础(11):JavaScript(五)

    1. 初识DOM 1.1 DOM介绍 1.1.3 什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定 ...

  9. dom初识

    1什么是dom document object model文档对象模型 是将整个页面文档封装成了一个对象,就是一个文档对象 整个页面就是一个文档,是由很多的节点组成的节点又包括三部分: 元素 属性 文 ...

随机推荐

  1. mysql数据库崩溃:InnoDB: Database page corruption on disk or a failed

    修改mysql配置文件my.cnf,添加 innodb_force_recovery = 6 innodb_purge_thread = 0 重启mysql 这时只可以执行select,create, ...

  2. Html 常见meta

    html 的meta标签对网页渲染及SEO搜索引擎起着不可忽视的作用.详细的写法一段时间不写,容易忘,所以整理了一下,方便需要时查看. <!DOCTYPE html> <!-- 使用 ...

  3. Vue2.5开发去哪儿网App 第三章笔记 下

    1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class   例如: :class="{activated:isactivated}" 上面的语法 ...

  4. 本地主机不安装oracle客户端--访问远程oracle数据库

    在不安装oracle客户端情况下用sqlplus连接数据库: 1.去官网下载 http://www.oracle.com/technetwork/topics/winx64soft-089540.ht ...

  5. 剑指offer十六之合并两个排序的链表

    一.题目 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 二.思路 注:链表1和链表2是两个递增排序的链表,合并这两个链表得到升序链表为链表3. 首先分析 ...

  6. 不用函数库求一个数的平方根 (java版)

    一.题目 编写程序求一个整数的平方根,精确到小数点后三位 二.解法 1) 采用 牛顿迭代法. 2)牛顿迭代法简介 假设方程 在  附近有一个根,那么用以下迭代式子:                  ...

  7. SQL Server 2016 需要单独安装 SSMS

    默认安装完 MSSQL 后,不自带 SSMS 的管理工具了,需要的话可以单独安装,貌似更专业了一些. https://msdn.microsoft.com/library/mt238290.aspx ...

  8. 谈谈Linux下的数据流重定向和管道命令

    一.标准输入.标准输出.错误输出概述 1.标准输入(stdin)是指令数据的输入,代码为0,使用<或者<<,默认是键盘. 2.标准输出(stdout)是指令执行成功返回的结果,代码为 ...

  9. mpvue图片轮播遇到的问题

    小程序官方写法: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" i ...

  10. SpringBoot入门 (十三) WebSocket使用

    本文记录在SpringBoot中使用WebSocket. 一 什么是WebSocket WebSocket是基于TCP协议的一种网络协议,它实现了浏览器与服务器全双工通信,支持客户端和服务端之间相互发 ...