javaScript 简单操作页面元素的方法

1 JavaScript组成三个部分- 1.ECMAScript - JavaScript的核心定义了javascript的语法规范JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准- 2.DOM - 文档对象模型一套操作页面元素的APIDOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作- 3.BOM -

可？

2423人浏览 · 2020-07-10 11:37:32

可？ · 2020-07-10 11:37:32 发布

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>