1 JavaScript组成三个部分

- 1.ECMAScript - JavaScript的核心

  • 定义了javascript的语法规范
  • JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准
    - 2.DOM - 文档对象模型
  • 一套操作页面元素的API
  • DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
    - 3.BOM - 浏览器对象模型
  • 一套操作浏览器功能的API
  • 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

- 02-获取页面元素

  • 思考 ： css语言如何获取页面元素？
    • 通过选择器
      • id选择器 : #id名
      • 类选择器: .类名
      • 标签选择器:标签名
      • 子代选择器:ul>li
      • 后代选择器:ul li
  • js语言如何获取元素页面元素？
    • 也是通过选择器
语法示例描述返回值
querySelector()document.querySelector(‘选择器’)根据选择器获取满足条件第一个元素DOM对象 null
querySelectorAll()document.querySelectorAll(‘选择器’)根据选择器获取满足条件所有元素伪数组

03-操作元素属性

语法（普通元素）示例描述
元素.style.样式属性box.style.width获取元素css样式属性
classNamebox.className获取元素类名
innerTextbox.innerText获取元素的文本
srcimg.src获取元素(图片img)的路径
hrefa.href获取元素（a标签）的超链接
语法（表单元素）示例描述
valueinput.value获取表单元素(单标签)的文本
disabledinput.disabled是否禁用（布尔类型）
checkedinput.checked是否选中(布尔类型),radio单选框 checkbox多选框
selectedinput.selected是否选中(布尔类型),select下拉选择框
</script>                            
给大家看看简单的案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="box" class="one" style="width: 100px;height: 100px;background-color: red">我是班长</div>
    <p>我是pp</p>
    <script>
        //需求：修改元素的颜色

        //1.获取元素
        var box = document.querySelector('#box');
        console.log(box);

        //2.操作元素的属性   ：对象的取值/赋值语法   (点语法 或 字符串语法)

        //2.1 取值:  对象名.属性名

        console.log(box.id);//box
        console.log(box['id']);//box
        console.log(box.style);//css样式属性对象
        console.log(box.style.height);//"100px" 带单位字符串

        //2.2 赋值：  对象名.属性名 = 值

        box.style.height = '200px';


        /*  
        注意点：html属性带- ，background-  font- margin- padding-,在js中都需要转成驼峰命名法
            a.驼峰命名法： （1）去掉- （2）将-后面的首字母变成大写
            b.原因： - 不符合js命名规则
        */
        box.style.fontSize = '20px';
        box.style.backgroundColor = 'green';

    </script>
</body>

</html>
# javascript
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区