初识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. 使用IEDA远程调试

    下面演示在docker中调试代码. 使用vulhub作为演示. 下载vulhub,进入vulhub/fastjson/vuln/ 编辑docker-compose.yml ,在最后新建一行加入  - ...

  2. WebSocket集成XMPP网页即时通讯1:Java Web Project服务端/客户端Jetty9开发初探

    Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...

  3. Python FTP文件传输

    FTP Server import socket import struct from concurrent.futures import ThreadPoolExecutor import json ...

  4. jdk1.8+SpringAOP注解报java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut select错误的不知原因的解决办法[仅供参考]

    先说办法:如果Aspectweaver-1.*.*jar这三个包版本比较低, 比如1.5.0这一层次的,可以找版本高一点的包替换低版本的包,问题可以得到解决 jar包的下载地址:https://mvn ...

  5. 善用Intellij插件可大幅提升我们的效率

    转自 :https://www.jianshu.com/p/686ba0ae4ac2 1. .ignore 生成各种ignore文件,一键创建git ignore文件的模板,免得自己去写 截图: 2. ...

  6. c# winform as3相互调用

    C#主要代码: 首先要添加COM组件-Shockwave Flash Object //接收flash发送过来的信息        private void axShockwaveFlash1_Fla ...

  7. [原] ubuntu安装Fcitx输入法

    1.终端输入: sudo add-apt-repository ppa:wengxt/fcitx-nightly 按回车确认添加 2.sudo apt-get update 更新软件源 3.sudo ...

  8. 数据库设计 Step by Step (2)——数据库生命周期

    引言:数据库设计 Step by Step (1)得到这么多朋友的关注着实出乎了我的意外.这也坚定了我把这一系列的博文写好的决心.近来工作上的事务比较繁重,加之我期望这个系列的文章能尽可能的系统.完整 ...

  9. Docker环境的持续部署优化实践

    最近两周优化了我们持续部署的程序,收效显著,记录下来分享给大家 背景介绍 那年公司快速成长,频繁上线新项目,每上线一个项目,就需要新申请一批机器,初始化,部署依赖的服务环境,一个脚本行天下 那年项目发 ...

  10. setup&hold

    setup time:建立时间,也就是在时钟上升沿到来前,数据需要稳定的时间.hold time:保持时间,指的是在时钟上升沿到来后,数据还需要保持的时间.实际上设置setup time和hold t ...