JavaScript Dom基础

学习目标

1.掌握基本的Dom查找方法

domcument.getElementById()

Domcument.getElementBy TagName()

2.掌握如何设置DOM元素的样式

DOM查找方法

语法：document.getElementById(“id”)

功能：返回对拥有指定ID的第一个对象的引用

返回值：DOM对象

说明：id为DOM元素上id属性的值

DOM查找方法

语法：document.getElementsByTagName(“tag”)

功能：返回一个对所有tag标签引用的集合

返回值：数组

说明：tag为要获取的标签名称

设置元素样式

语法：ele.style.styleName=styleValue

功能：设置ele元素的CSS样式

说明：1.ele为要设置样式的DOM对象

2.styleName为要设置的样式名称

3.styleValue为设置的样式值

学习目标

1.掌握innerHTML属性的应用

2.掌握className属性的应用

3.掌握任何在DOM元素上添加删除获取属性

innerHTML

语法：ele.innerHTML

功能：返回ele元素开始和结束标签之间的HTML

语法：ele.innerHTML=“html”

功能：设置ele元素开始和结束标签之间的HTML内容为html

className

语法：ele.className

功能：返回ele元素的class属性

语法：ele.className=“cls”

功能：设置ele元素的class属性为cls

获取属性

语法：ele.getAttribute（“attribute”）

功能：获取ele元素的attribute属性

说明：1.ele是要操作的dom对象

2.Attribute是要获取的html属性

设置属性

语法：ele.setAttribute(“attribute”,value)

说明：1.ele是要操作的dom对象

2.attribute为要设置的属性名称

3.value为设置的attribute属性的值

删除属性

语法：ele.removeAttribute(“attribute”)

功能: 删除ele上的attribute属性

说明：1.ele是要操作的dom对象

  1. Attribute是要删除的属性名称

JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;的更多相关文章

  1. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  2. jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

    jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...

  3. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  4. jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  7. JavaScript字符串、数组、对象方法总结

    字符串方法 示例字符串: const str = "hello,kitty,hello,vue "; 一.基本方法 charAt(n) 返回指定索引的字符 charCodeAt(n ...

  8. JavaScript数据类型判断的四种方法

    码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14416375.html 本文分享了JavaScript类型判断的四种方法:typeo ...

  9. JavaScript夯实基础系列（五）：类

      JavaScript中没有类,是通过使用构造函数和原型模式的组合来实现类似其它面向对象编程语言中"类"的功能.ES6引入的关键字class,形式上向其它面向对象编程语言靠拢,其 ...

随机推荐

  1. js向一个数组中插入元素的几个方法-性能比较

    向一个数组中插入元素是平时很常见的一件事情.你可以使用push在数组尾部插入元素,可以用unshift在数组头部插入元素,也可以用splice在数组中间插入元素. 但是这些已知的方法,并不意味着没有更 ...

  2. JavaScript中var和this定义变量的区别

    JavaScript中var和this定义变量的区别 在js中声明变量时可以使用var和this,但使用this的有很大一部分参考书是没有的,经过查阅相关资料总结如下: 用var和this声明变量,存 ...

  3. [LeetCode] 110. Balanced Binary Tree ☆(二叉树是否平衡)

    Balanced Binary Tree [数据结构和算法]全面剖析树的各类遍历方法 描述 解析 递归分别判断每个节点的左右子树 该题是Easy的原因是该题可以很容易的想到时间复杂度为O(n^2)的方 ...

  4. Java自动装箱中的缓存原理

    今天看到一道'经典'面试题: Integer a = 100; Integer b = 100; System.out.println(a==b); Integer a2 = 200; Integer ...

  5. asp.net mvc 笔记一

    webapi controller 中 action 名称 不能与 View controller  中的 action 名称相同,否则 Url.Action("actionName&quo ...

  6. ASP.Net MVC(3) 之Razor视图引擎的基础语法

    Razor视图引擎的基础语法: 1.“_”开头的cshtml文档将不能在服务器上访问,和asp.net中的config文档差不多. 2.Razor语法以@开头,以@{}进行包裹. 3.语法使用: 注释 ...

  7. MyBatis 为什么需要通用 Mapper ?

    一.通用 Mapper 的用途 ? 我个人最早用 MyBatis 时,先是完全手写,然后用上了 MyBatis 代码生成器(简称为 MBG),在使用 MBG 过程中,发现一个很麻烦的问题,如果数据库字 ...

  8. java 实现简单循环队列

    package www.queue; import java.util.Arrays; /** * 循环队列: * 循环队列的出现是为了解决顺序队列出队列后,首指针向后移动后前面的存储过程浪费不能使用 ...

  9. Angular4-配置

    基于 Angular Quickstart git clone https://github.com/angular/quickstart ng4-quickstart npm i npm start ...

  10. Oracle与MySQL的SQL语句区别

    2 表 2.1 创建表(同) create table tableName( columnName1 int, columnName2 int ) 2.2 删除表(异) MySQL: drop tab ...