DOM:文档对象模型

核心

浏览器网页就是一个Dom树形结构!

  • 更新:更新Dom节点
  • 遍历Dom节点:得到Dom节点
  • 删除:删除一个Dom节点
  • 添加:添加一个新的节点

要操作一个Dom节点,就必须要先获得这个Dom节点

获得Dom节点

这是原生代码,之后我们尽量都使用jQuery();

更新节点

操作文本

操作css

删除节点

删除节点的步骤:先获取父节点,再通过父节点删除自己

注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意。

插入节点

我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个Dom节点已经存在元素了,我们就不能这么干了!会产生覆盖

追加

创建一个新的标签

<script>
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.creatElementById('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello,Kuangshen';
//创建一个标签节点
var myScript = document.creatElementById('script');
myScript.setAttribute('type','text/javascript'); //可以创建一个style标签
var myStyle = document.creatElementById('style');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容 document.getElementByTagName('head')[0].appendChild(myStyle);
</script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

javascript基础(三): 操作DOM对象(重点)的更多相关文章

  1. JavaScript基础9——操作DOM树

    appendChild()方法:添加子节点到末尾 类似于剪切粘贴的效果   insertBefore(newNode, oldNode)方法:在某个节点之前插入一个节点 newNode为要插入的节点, ...

  2. javaScript操作DOM对象(看三遍,敲三遍,写三遍! 不会你找我)!!

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  3. JavaScript操作DOM对象

    js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  4. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  5. 操作DOM对象

    操作DOM对象 目录 操作DOM对象 1. 核心 2. 获得Dom节点 3. 更新节点 1. 操作文本 2. 操作CSS 4. 删除节点 5. 插入节点 1. 追加(将已存在的节点移到后面) 2. 创 ...

  6. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  7. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  8. WebKit JavaScript Binding添加新DOM对象的三种方式

    一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...

  9. JS操作DOM对象——JS基础知识(四)

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  10. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

随机推荐

  1. ThreadLocal源码解析-Java8

    目录 一.ThreadLocal介绍 1.1 ThreadLocal的功能 1.2 ThreadLocal使用示例 二.源码分析-ThreadLocal 2.1 ThreadLocal的类层级关系 2 ...

  2. excel筛选重复项代码

    Sub test()'updateby Extendoffice 20151030    Dim xRng As Range    Dim xTxt As String    On Error Res ...

  3. ca33a_demo_c++_新旧代码的兼容char数组与vector_string相互转换

    /*ca33a_demo_c++33_CppPrimer_新旧代码的兼容_txwtech旧代码:数组和c风格字符串新代码:vector和string相互转换:c风格字符串<- ->stri ...

  4. python-判断、循环、列表、字典

    一.如何将两个列表合并成一个字典 运用dict(zip()) 例如: usernames = ['xiaohei', 'xiaobai', 'xiaoming'] passwords = ['1234 ...

  5. Linux工具之开发调试命令

    目录 gcc gdb vim pmap pstack strace readelf objdump ldd gcc 详见 gcc -E 只预处理 gcc -S 生成汇编代码 gcc -c 生成可重定向 ...

  6. 手机商品分享样式(纯html+css)

    效果图: html: <!DOCTYPE html> <html lang="en"> <head>     <meta charset= ...

  7. redis高级命令1

    设置name的过期时间是20秒 redis默认是16个数据库,默认是将数据存储在第0个数据库中 因为默认是0,当你选择其他数据的时候,是没有值的

  8. springboot自动装配原理

    最近开始学习spring源码,看各种文章的时候看到了springboot自动装配实现原理.用自己的话简单概括下. 首先打开一个基本的springboot项目,点进去@SpringBootApplica ...

  9. 入门大数据---Hbase是什么?

    一.Hbase是什么? Hbase属于NoSql的一种. NoSql数据库分为如下几类: Key-Value类型数据库 这类数据库主要会使用到一个哈希表,这个表有一个特定的键和一个指针指向特定的数据. ...

  10. python实用笔记——IO编程

    打开文件 f = open('/Users/michael/test.txt', 'r') 再读取 >>> f.read() 'Hello, world!' 最后关闭 >> ...