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. py-faster R-CNN 用于训练自己的数据（1）

    官方给出的faster R-CNN的源码python版:https://github.com/rbgirshick/py-faster-rcnn 先来分析一下 整个文件,根目录下的文件 caffe-f ...

  2. Laravel框架如何去除URL中的/public

    laravel/server.php改名为index.php 并且将public目录下的.htaccess拷贝到Larvael根目下 再访问 如有配置不成功的请加群

  3. PHP7 ci框架session存文件，登录的时候session不能读取

    config.php配置 $config['sess_driver'] = 'files';//以文件存储session $config['sess_cookie_name'] = 'ci_sessi ...

  4. 蓝桥杯—BASIC-25 回形取数

    题目:回形取数就是沿矩阵的边取数,若当前方向上无数可取或已经取过,则左转90度.一开始位于矩阵左上角,方向向下.输入格式 输入第一行是两个不超过200的正整数m, n,表示矩阵的行和列.接下来m行每行 ...

  5. 逆袭之旅DAY20.XIA.循环结构

    2018-07-16 19:53:47 while循环 do do...while循环 for 循环

  6. TCP/UDP工作流程图

     说到socket必须要贴的图: TCP工作流程:  UDP工作流程:

  7. java字符串根据空格截取并存进list，并在每个元素前后加上/

    public class List1 { public static void main(String[] args) { String s = "abc nnn ooo/xzsxc bs& ...

  8. 二叉树实现，C++语言描述

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  9. iOS 统一配置

    1 .统一设置nav标题样式: - (void)_setNavigationTitle { NSDictionary *navigationParams = @{NSForegroundColorAt ...

  10. xml文档的读取

    #! /usr/bin/env python3 # -*- coding:utf-8 -*- import xml.dom.minidom  #该模块被用来处理xml文件 #打开xml文档 dom=x ...