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样式属性
className box.className 获取元素类名
innerText box.innerText 获取元素的文本
src img.src 获取元素(图片img)的路径
href a.href 获取元素(a标签)的超链接
语法(表单元素) 示例 描述
value input.value 获取表单元素(单标签)的文本
disabled input.disabled 是否禁用(布尔类型
checked input.checked 是否选中(布尔类型),radio单选框 checkbox多选框
selected input.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>


Logo

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

更多推荐