初识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文档对象模型 是将整个页面文档封装成了一个对象,就是一个文档对象 整个页面就是一个文档,是由很多的节点组成的节点又包括三部分: 元素 属性 文 ...
随机推荐
- 使用IEDA远程调试
下面演示在docker中调试代码. 使用vulhub作为演示. 下载vulhub,进入vulhub/fastjson/vuln/ 编辑docker-compose.yml ,在最后新建一行加入 - ...
- WebSocket集成XMPP网页即时通讯1:Java Web Project服务端/客户端Jetty9开发初探
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...
- Python FTP文件传输
FTP Server import socket import struct from concurrent.futures import ThreadPoolExecutor import json ...
- jdk1.8+SpringAOP注解报java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut select错误的不知原因的解决办法[仅供参考]
先说办法:如果Aspectweaver-1.*.*jar这三个包版本比较低, 比如1.5.0这一层次的,可以找版本高一点的包替换低版本的包,问题可以得到解决 jar包的下载地址:https://mvn ...
- 善用Intellij插件可大幅提升我们的效率
转自 :https://www.jianshu.com/p/686ba0ae4ac2 1. .ignore 生成各种ignore文件,一键创建git ignore文件的模板,免得自己去写 截图: 2. ...
- c# winform as3相互调用
C#主要代码: 首先要添加COM组件-Shockwave Flash Object //接收flash发送过来的信息 private void axShockwaveFlash1_Fla ...
- [原] ubuntu安装Fcitx输入法
1.终端输入: sudo add-apt-repository ppa:wengxt/fcitx-nightly 按回车确认添加 2.sudo apt-get update 更新软件源 3.sudo ...
- 数据库设计 Step by Step (2)——数据库生命周期
引言:数据库设计 Step by Step (1)得到这么多朋友的关注着实出乎了我的意外.这也坚定了我把这一系列的博文写好的决心.近来工作上的事务比较繁重,加之我期望这个系列的文章能尽可能的系统.完整 ...
- Docker环境的持续部署优化实践
最近两周优化了我们持续部署的程序,收效显著,记录下来分享给大家 背景介绍 那年公司快速成长,频繁上线新项目,每上线一个项目,就需要新申请一批机器,初始化,部署依赖的服务环境,一个脚本行天下 那年项目发 ...
- setup&hold
setup time:建立时间,也就是在时钟上升沿到来前,数据需要稳定的时间.hold time:保持时间,指的是在时钟上升沿到来后,数据还需要保持的时间.实际上设置setup time和hold t ...