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. svn中的ignore

    首先,svn GUI菜单右键的ignore功能,写的模模糊糊,网上也没啥人给出清晰的解释,stackoverflow推荐用命令行控制 SVN有3中方法配置ignore 1.配置文件 C:\Users\ ...

  2. echarts-------饼形图

    首先echarts是一个可以提供给用户体验效果更好的一个图形界面, Canvas 类库 ZRender. 1.下载echarts的js,可以在官方网址进行下载echarts.min.js 2.将下载下 ...

  3. JS时钟--星期 年 月 日 时 分

    var clock = function(clockName){ var mydate = new Date(); var hours = mydate.getHours(); var minutes ...

  4. MySQL数据库安装与配置鸡汤

    目录 一.概述 二.MySQL安装 三.安装成功验证 四.NavicatforMySQL下载及使用 一.概述 MySQL版本:5.7.17 下载地址:http://rj.baidu.com/soft/ ...

  5. pre强制 自动换行

    转自:http://www.16sucai.com/2010/10/941.html <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会 ...

  6. py QScrollArea

    # -*- coding: utf-8 -*-import jsonimport loggingimport sysimport requestsfrom PyQt5 import QtWidgets ...

  7. List.contains()与自动拆箱

    最近项目引入sonarQube这种代码静态检查的东东,以前没有人力和精力review,现在只要扫描一下项目,就发现很多有趣的地方. 有这么一段代码: List<Long> list = L ...

  8. centos 安装 TortoiseSVN svn 客户端

    1 安装 svn客户端 yum install -y subversion 2 常用命令操作   检出命令 svn checkout http://svn.com/path

  9. libiconv库的安装和使用

    1.libiconv包的下载路径 包的下载页面http://www.gnu.org/software/libiconv/ 2.编译安装libiconv库 $tar zxvf libiconv-1.14 ...

  10. leetcode python 001

    给定一个数组,和一个数字target,要求返回和为target的两个数组成员的下标. import numpy as npimport time #### 构造题目 , x数组大小x=100000l1 ...