4.dom操作

createElement 创建一个元素

<button id="btn">点击</button>

<ul id="ul1"></ul>

<script>

    var oBtn = document.getElementById("btn")

    var oUl = document.getElementById("ul1")

    oBtn.onclick = function(){

        var oLi = document.createElement("li")

        oLi.innerHTML = "nodeing.com"

        console.log(oLi)

    }

</script>

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

<button id="btn">点击</button>

<ul id="ul1"></ul>

<script>

    var oBtn = document.getElementById("btn")

    var oUl = document.getElementById("ul1")

    num = 0

    oBtn.onclick = function(){

        num++

        var oLi = document.createElement("li")

        oLi.innerHTML = "nodeing.com" + num

        oUl.appendChild(oLi)

    }

</script>

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

<button id="btn">点击</button>

<ul id="ul1">

    <li id="first">11111</li>

</ul>

<script>

    var oBtn = document.getElementById("btn")

    var oUl = document.getElementById("ul1")

    var oFirst = document.getElementById("first")

    num = 0

    oBtn.onclick = function(){

        num++

        var oLi = document.createElement("li")

        oLi.innerHTML = "nodeing.com" + num

        oUl.insertBefore(oLi, oFirst)

        oFirst = oLi

    }

</script>

removeChild() 删除某个子元素

<button id="btn">点击</button>

<ul id="ul1">

    <li id="first">11111</li>

</ul>

<script>

    var oBtn = document.getElementById("btn")

    var oUl = document.getElementById("ul1")

    var oFirst = document.getElementById("first")

    num = 0

    oBtn.onclick = function(){

        num++

        var oLi = document.createElement("li")

        oLi.innerHTML = "nodeing.com" + num

        oUl.insertBefore(oLi, oFirst)

        oFirst = oLi

    }

    oUl.onclick = function(ev){

        var ev = ev || event

        this.removeChild(ev.target)

    }

</script>

getAttribute/setAttribute

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box{

            width: 100px;

            height: 100px;

            background-color: royalblue

        }

    </style>

</head>

<body>

    <div id="box">nodeing.com</div>

    <script>

        var oBox = document.getElementById("box")

        alert(oBox.getAttribute("id"))

        document.onclick = function(){

            oBox.setAttribute("class", "box")

        }

    </script>

</body>

</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. Java实现 LeetCode 773 滑动谜题（BFS）

    773. 滑动谜题 在一个 2 x 3 的板上(board)有 5 块砖瓦,用数字 1~5 来表示, 以及一块空缺用 0 来表示. 一次移动定义为选择 0 与一个相邻的数字(上下左右)进行交换. 最终 ...

  2. Java实现 蓝桥杯 算法训练 猴子吃包子（暴力）

    试题 算法训练 猴子吃包子 问题描述 从前,有一只吃包子很厉害的猴子,它可以吃无数个包子,但是,它吃不同的包子速度也不同:肉包每秒钟吃x个:韭菜包每秒钟吃y个:没有馅的包子每秒钟吃z个:现在有x1个肉 ...

  3. Java实现 蓝桥杯 算法提高 队列操作

    算法提高 队列操作 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 队列操作题.根据输入的操作命令,操作队列(1)入队.(2)出队并输出.(3)计算队中元素个数并输出. 输入格式 ...

  4. Java实现 蓝桥杯 生命游戏

    标题:生命游戏 康威生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 这个游戏在一个无限大的2D网格上进行. 初始时,每个小方格中居住着一个活着或死了的细胞. 下一时刻每个细胞的状态 ...

  5. Java实现 LeetCode 32 最长有效括号

    32. 最长有效括号 给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()" 输出: 2 解释: 最长有效括号子串为 & ...

  6. TZOJ 数据结构实验--静态顺序栈

    描述 创建一个顺序栈(静态),栈大小为5.能够完成栈的初始化.入栈.出栈.获取栈顶元素.销毁栈等操作. 顺序栈类型定义如下: typedef struct {  int data[Max];    i ...

  7. Python子类构造函数调用super().__init__()用法说明

    一.super的作用 1.如果子类(Puple)继承父类(Person)不做初始化,那么会自动继承父类(Person)属性name.2.如果子类(Puple_Init)继承父类(Person)做了初始 ...

  8. Python使用wxpy模块实现微信两两群组消息同步

    python使用wxpy模块提供的微信API接口实现两两群组的消息同步 安装模块: pip install wxpy 注意:需要同步的微信群需要保存到通讯录中 以下是自己闲来无事写的代码,暂时还存在以 ...

  9. 谈谈Java常用类库中的设计模式 - Part Ⅱ

    概述 本系列上一篇:建造者.工厂方法.享元.桥接 本文介绍的设计模式(建议按顺序阅读): 适配器 模板方法 装饰器 相关缩写:EJ - Effective Java Here We Go 适配器 (A ...

  10. UIPopoverPresentationController的使用

    前言 最近项目中很多地方有一个相同的需求,那就是点击一个按钮的时候在按钮的某一个方向弹出一个视图,这个视图需要带有一个箭头指向,就像下图一样.要实现这个功能,就要用到UIPopoverPresenta ...