webApi01

最新推荐文章于 2024-10-15 09:57:04 发布

Ordbiao

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量146

点赞数

分类专栏： webapi 文章标签： javascript

本文链接：https://blog.csdn.net/tooHar/article/details/116161360

版权

webapi 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习目录

小概
1. 查询元素
2. 操作元素属性
3. 元素常用属性
- 3.1 普通元素常用属性
- 3.2 表单元素常用属性
4. 点语法操作元素样式
5. 事件介绍和注册事件
6. 扩展补充
总结

小概

1.查询元素，2.操作元素属性，3.元素的常用属性（普通元素/表单元素），4.点语法操作元素样式，5.事件介绍及注册事件，6.补充

1. 查询元素

查询页面元素

获取单个元素： document.querySelector(‘选择器’)

根据选择器查询页面的‘第一个’元素
输入：选择器字符串
return： Dom对象 | null
如果可以查询，则获取DOM对象
如果不可以查询，选择器错误，则获取null

let box =  document.querySelector('.box');
        console.log( box );//DOM对象

获取多个元素： document.querySelector(‘选择器’)

根据选择器查询页面‘所有’元素
输入：选择器字符串
return：一定是数组（伪数组）
如果查询不到，也是返回空数组
伪数组：有数组三要素，但是不能使用数组的方法

        let oneList = document.querySelectorAll('.one');
        console.log( oneList )

2. 操作元素属性

学习目标：操作元素属性：获取属性，设置属性。

<div id="test1" class="box" style="width: 100px;height: 100px;background-color: red">书到用时方恨少</div>

js:
//1.查询元素(对象，DOM对象，标签，元素)
let box = document.querySelector('.box');
console.log(box);

//2.操作元素属性 ：  (1)点语法： 对象名.属性名   (2)字符串语法： 对象名['属性名']
//2.1获取
console.log( box.id); //'test1'
console.log( box['id']); //'test2'

console.log( box.style); // 获取的是对象， 存储css样式
console.log( box.style.width); //'100px'
console.log( box.style.backgroundColor); //'red'
console.log( box.className); //'box'
/* 注意点： html属性 和 DOM属性 不一定是一一对应的 
    (1)获取类名需要使用： className 
        * 原因： class是js的关键字
    (2)如何css样式包含 - ，如border-  padding-  margin- font- , 则要使用驼峰命名法
        * 第一步：去掉-
        * 第二步：把-后面的单词首字母大写
*/

//2.2 设置 :  对象名.属性名 = 值
        box.style.backgroundColor = 'skyblue';
        box.style.width = '200px';
        box.style.height = '200px';

3. 元素常用属性

3.1 普通元素常用属性

学习目标: 普通元素常用属性
1.HTML属性 : 元素名.属性名
innerText : 文本
href : a标签链接
src : img标签路径
2.css属性：元素名.style.属性名
width
height
backgroundColor

<div class="box" style="width: 100px;
height: 100px;background-color: red;">这是个div</
<a href="http://www.sdsada.com">这是a标签</a>
<img src="001.jpg" alt="这是一张照片">
js//
    //获取元素
    let box = document.querySelector('.box');
    let a = document.querySelector('a');
    let img = document.querySelector('img');
    //1.HTML属性  :  元素名.属性名
    //1.1 innerText : 文本
    console.log( box.innerText );
    console.log( a.innerText );
    box.innerText = '通过innerText写入内容';
    //1.2 href : a标签链接
    console.log( a.href );
    a.href = 'http://www.baidu.com';
    //1.3 src : 资源路径
    console.log( img.src );//绝对路径
    img.src = '002.jpg';
    //2.CSS属性 : 元素名.style.属性名
    console.log( box.style.backgroundColor );//'red'
    box.style.backgroundColor = 'green';

3.2 表单元素常用属性

表单元素：大多数都是单标签
1.表单元素有一类特殊的属性，代表的是表单元素两种状态。
   disabled : true 禁用 false 启用
   checked : true 选中 false 不选中（用于radio和chec
   selected : true 选中 false 不选中（用于option）
2.这类属性在js中只有两个值： true 和 false
   * 使用DOM语法来操作的时候，这类属性是布尔类型
3.在HTML中：写了就是true,不写默认值就是false

<input type="text" value="账户" disabled>
<input type="password" placeholder="密码">
<br>
<!-- 单选框 -->
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<br>
<!-- 多选框 -->
<input type="checkbox" name="good">商品1
<input type="checkbox" name="good" checked>商品2
<input type="checkbox" name="good">商品3
<input type="checkbox" name="good">商品4
<br>
<!-- 选择框 -->
<select name="" id="">
    <option value="">前端</option>
    <option value="">UI</option>
    <option value="" selected>Java</option>
</select>
<br>
<input type="button" value="按钮">
js//
    /* 学习目标 ： 表单元素常用属性 
        1.文本 ： value
        2.布尔类型属性
            disabled :  true 禁用  false 启用
            checked : true 选中  false 不选中   （用于radio和checkbox）
            selected : true 选中  false 不选中 （用于option） 
    */
    //获取元素
    let inputList =  document.querySelectorAll('input');
    console.log( inputList );
    let optionList = document.querySelectorAll('option');
    //1.文本 ： value
    /*重要注意点 
    (1)inputList是一个数组，数组中的元素才是DOM对象 ：  [ dom对象1,dom对象2,.....]
    (2)数组本身是没有DOM对象的属性的，必须要先通过下标取出dom对象，然后才可以访问DOM对象属性
    */
    console.log( inputList[0].value );
    inputList[0].value = '我是表单';
    //2.布尔类型属性
    inputList[1].disabled = true;
    inputList[3].checked = true;
    inputList[4].checked = true;
    optionList[1].selected = true;

4. 点语法操作元素样式

操作元素属性：点语法
普通元素与表单元素
HTML属性 : 元素.属性名
CSS属性(样式) : 元素.style.属性名
点语法操作元素样式属性注意点：元素.style.属性名
(1)获取：只能获取行内样式，无法获取行外样式
(2)数据类型：获取的都是string类型,带单位
(3)修改：没有行内行外限制，可以修改一切样式

        let box = document.querySelector('.box');

        /* 1.只能获取行内样式，无法获取行外样式 
           2.获取的都是字符串类型，带单位
        */
        console.log( box.style.height );//'100px'
        console.log( box.style.backgroundColor );//'red'

        console.log( box.style.width );//''
        console.log( box.style.border );//''

        /* 3.点语法可以修改一切样式 */
        box.style.width = '200px';
        box.style.border = '5px solid blue';
        box.style.fontSize = '30px';

点语法只能获取行内样式（无法获取行外样式）;但是(.style.属性=’’)可以修改任何样式，而且权重比行内样式高，低于！important、

5. 事件介绍和注册事件

1.交互(功能) ：什么元素在什么时刻做什么事
2.事件(技术) : js处理网页交互的一种技术机制
3.事件三要素
事件源：什么元素
事件类型：什么时刻（单击，双击，鼠标移入/移出）
onclick : 单击事件
ondblclick : 双击事件
onmouseover : 鼠标移入
onmouseout : 鼠标移出
事件处理函数 ：做什么事
4.注册事件：使用事件机制给元素添加交互功能
* 4.1 语法：事件源.事件类型 = 事件处理函数
* 4.2 事件本质：给元素的属性赋值
5.事件原理：记住本质是给元素的属性赋值
* 5.1 注册事件的时候，事件处理函数不会执行（声明函数的时候不会执行）
* 5.2 当用户触发事件的时候，浏览器会自动捕捉这个事件，然后自动帮我们来调用对象的方法
* box.onclick(); 浏览器底层会自动帮你执行

    <div class="box" style="width: 100px;
    height: 100px;background-color: red"></div>

    <p class="pp" >点我给你颜色看看</p>

    js//
        //获取元素
        let box = document.querySelector('.box');
        //设置元素属性
        // box.style.backgroundColor = 'green';


        //注册点击事件
        box.onclick = function(){
            //事件处理
            box.style.backgroundColor = 'green';
        };

        //调用函数 : 不需要自己写，你点击元素，浏览器会自动帮你执行
        // box.onclick();

        //注册鼠标移入事件
        box.onmouseover = function(){
            //事件处理函数
            box.style.border = '10px solid pink';
        };

        //双击事件
        box.ondblclick = function(){
            alert('双击666');
        };

        //注册鼠标移出事件
        box.onmouseout = function(){
            //事件处理函数
            box.style.border = '10px solid yellow';
        };

明确：事件源（什么元素），事件类型（单击，双击，鼠标移出移入…），事件处理函数。

6. 扩展补充

innerText与innerHTML的区别

innerText : 只能操作文本
获取：获取元素及子元素文本
设置：不能解析标签的，全部当作文本
innerHTML : 操作元素内容（文本 + 标签）
获取：获取文本+标签
设置：可以解析字符串中的标签

    <div class="box">我是爸爸
        <p style="color: red">我是儿子</p>
    </div>
   
   js//
   let box = document.querySelector('.box');
        //1.获取操作

        //1.1 innerText : 获取文字（元素及子元素）
        console.log( box.innerText );
        //1.2 innerHTML : 获取内容 （文字 + 标签）
        console.log( box.innerHTML );

        //2.设置操作

        //2.1 innerText : 无法解析字符串中的标签， 会作为本文的一部分
        box.innerText = '<a href="#">我是链接</a><h1>我是标题</h1>';

        //2.2 innerHTML : 可解析字符串中的标签
        box.innerHTML = '<a href="#">我是链接</a><h1>我是标题</h1>';

6.2 根据id获取页面元素

    let one = document.getElementById('one');
    console.log( one );

6.3 根据标签名获取页面元素

        let liList = document.getElementsByTagName('li');
        console.log(liList);

        //获取指定ul的li元素
        let ul2 = document.getElementById('ul2');//先获取父元素
        let li2List = ul2.getElementsByTagName('li');//再调用父元素的getElementsByTagName
        console.log( li2List );

了解即可，太复杂

6.4 根据类名获取页面元素

//根据类名获取元素
let oneList = document.getElementsByClassName('one');
console.log( oneList );
//返回值和document.querySelectorAll的返回值一样都是伪数组

6.5 根据name属性获取表单元素

    <input type="text" name="username">
    <input type="text" name="password">
    <br>
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
    <br>
    <input type="checkbox" name="good">商品1
    <input type="checkbox" name="good">商品2
    <input type="checkbox" name="good">商品3

    js//
        /* DOM中有两种方式可以获取元素

        1.最常用 ： 选择器方式    document.querySelector('选择器')
        2.分别获取
            id名
            标签名
            类名
            name属性值 : 用于获取表单元素
        */   
        
        //根据表单元素name属性值获取表单元素
        let sexList = document.getElementsByName('sex');
        console.log( sexList );

总结

设置HTML的属性可以直接元素.属性名=新属性，但是设置css属需要元素.style.属性名 =新属性。事件和注册事件后期用的会比较多，遇到我们应该清楚需求，明确事件源是什么，事件类型，事件处理函数(你想让事件触发的时候做点什么)。还有就是清楚innerText和innerHTML的区别，还有一个和类似innerHTML的方法insertadjacentHTML（position，text）我觉得比前者好用些、
加油加油！