4.dom操作

createElement 创建一个元素

  1. <button id="btn">点击</button>
  2. <ul id="ul1"></ul>
  3. <script>
  4.     var oBtn = document.getElementById("btn")
  5.     var oUl = document.getElementById("ul1")
  6.     oBtn.onclick = function(){
  7.         var oLi = document.createElement("li")
  8.         oLi.innerHTML = "nodeing.com"
  9.         console.log(oLi)
  10.     }
  11. </script>

appendChild() 在最后添加一个子元素

  1. <button id="btn">点击</button>
  2. <ul id="ul1"></ul>
  3. <script>
  4.     var oBtn = document.getElementById("btn")
  5.     var oUl = document.getElementById("ul1")
  6.     num = 0
  7.     oBtn.onclick = function(){
  8.         num++
  9.         var oLi = document.createElement("li")
  10.         oLi.innerHTML = "nodeing.com" + num
  11.         oUl.appendChild(oLi)
  12.     }
  13. </script>

insertBefore() 在某个元素之前插入一个子元素

  1. <button id="btn">点击</button>
  2. <ul id="ul1">
  3.     <li id="first">11111</li>
  4. </ul>
  5. <script>
  6.     var oBtn = document.getElementById("btn")
  7.     var oUl = document.getElementById("ul1")
  8.     var oFirst = document.getElementById("first")
  9.     num = 0
  10.     oBtn.onclick = function(){
  11.         num++
  12.         var oLi = document.createElement("li")
  13.         oLi.innerHTML = "nodeing.com" + num
  14.         oUl.insertBefore(oLi, oFirst)
  15.         oFirst = oLi
  16.     }
  17. </script>

removeChild() 删除某个子元素

  1. <button id="btn">点击</button>
  2. <ul id="ul1">
  3.     <li id="first">11111</li>
  4. </ul>
  5. <script>
  6.     var oBtn = document.getElementById("btn")
  7.     var oUl = document.getElementById("ul1")
  8.     var oFirst = document.getElementById("first")
  9.     num = 0
  10.     oBtn.onclick = function(){
  11.         num++
  12.         var oLi = document.createElement("li")
  13.         oLi.innerHTML = "nodeing.com" + num
  14.         oUl.insertBefore(oLi, oFirst)
  15.         oFirst = oLi
  16.     }
  17.     oUl.onclick = function(ev){
  18.         var ev = ev || event
  19.         this.removeChild(ev.target)
  20.     }
  21. </script>

getAttribute/setAttribute

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: royalblue
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="box">nodeing.com</div>
  18.     <script>
  19.         var oBox = document.getElementById("box")
  20.         alert(oBox.getAttribute("id"))
  21.         document.onclick = function(){
  22.             oBox.setAttribute("class", "box")
  23.         }
  24.     </script>
  25. </body>
  26. </html>

参考文档

Document.createElement() - Web API 接口| MDN

螺钉课堂视频课程地址：http://edu.nodeing.com

DOM-BOM-EVENT（4）的更多相关文章

  1. BOM基础（四）

    最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容 ...

  2. DOM 事件深入浅出（二）

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

  3. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  4. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  5. c#中的delegate（委托）和event（事件）

    c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...

  6. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  7. DOM学习笔记（二）对象方法与属性

    所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...

  8. DOM之事件（一）

    DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件.它是用户和页面交互的核心.当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实 ...

  9. DOM的概念（1）

    什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...

  10. JavaScript DOM学习总结（一）

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

随机推荐

  1. html css javascript实现弹弹球

    效果如图: 原创代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. Maven+JSP+SSM+Mysql实现的音乐网站

    项目简介 项目来源于:https://gitee.com/coder_ze/iMusic 本系统基于Maven+JSP+SSM+Mysql实现的音乐网站.主要实现的功能有音乐播放.下载.上传等几个模块 ...

  3. Java实现 LeetCode 691 贴纸拼词（DFS+map记录）

    691. 贴纸拼词 我们给出了 N 种不同类型的贴纸.每个贴纸上都有一个小写的英文单词. 你希望从自己的贴纸集合中裁剪单个字母并重新排列它们,从而拼写出给定的目标字符串 target. 如果你愿意的话 ...

  4. Java实现 蓝桥杯 基础练习 查找整数

    基础练习 查找整数 时间限制:1.0s 内存限制:256.0MB 提交此题 锦囊1 锦囊2 问题描述 给出一个包含n个整数的数列,问整数a在数列中的第一次出现是第几个. 输入格式 第一行包含一个整数n ...

  5. Java实现 LeetCode 54 螺旋矩阵

    54. 螺旋矩阵 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], ...

  6. Java实现 蓝桥杯 历届试题 约数倍数选卡片

    问题描述 闲暇时,福尔摩斯和华生玩一个游戏: 在N张卡片上写有N个整数.两人轮流拿走一张卡片.要求下一个人拿的数字一定是前一个人拿的数字的约数或倍数.例如,某次福尔摩斯拿走的卡片上写着数字" ...

  7. 转载：windows下安装mac虚拟机（Vmvare+mac）

    体验Mac的高效与思想,每个技术人都应该去了解和体验,本文转载自网络,使用Vmvare,虚拟Mac系统 https://blog.csdn.net/qq_31867709/article/detail ...

  8. 天哪！手动编写mybatis雏形竟然这么简单

    前言 mybaits 在ORM 框架中,可算是半壁江山了,由于它是轻量级,半自动加载,灵活性和易拓展性.深受广大公司的喜爱,所以我们程序开发也离不开mybatis .但是我们有对mabtis 源码进行 ...

  9. WebDriverWait与expected_conditions结合使用

    expected_conditions判断页面元素 demo2 from selenium import webdriver from selenium.webdriver.support.ui im ...

  10. sourcetree 安装破解注册方法

    1.下载sourcetree安装包 2.点击安装到下图步骤 3.在网盘中下载accounts.json  文件,( 链接:https://pan.baidu.com/s/1tJd_xCh-B-oOwd ...