WebAPI作用和分类之DOM操作

DOM操作:

document Object model(将网页封装程一个对象(对象就叫document)进行操作)

本质:就是用来操作网页

1.什么是DOM树

        //DOM树是一种形象的说法, 将html页面中的标签以及标签之间的关系以树状结构展示描述

        //网页是由什么组成的 ?

         网页就是由各种html标签组成

        //结论: 由于整个网页都是一个对象, 组成网页的每一个标签也是一个对象

 2.DOM树有什么作用?

        //用过DOM树可以获取标签及了解标签之间的包含,并列关系

3.DOM对象:在网页中任何一个html标签对象都叫DOM对象

获取页面中的标签(元素)

        //document.querySelector('css选择器')

        一次只能获取一个标签

        // 注意:

        // 1.CSS选择器指的就是前面所学的各种css选择器

        // 2.document.querySelector()返回的结果就是一个标签对象(DOM对象)

        //代码演示

        // 获取div标签

        // let div = document.querySelector('div');

        // console.log(div);

        //获取span标签

        // let span = document.querySelector('div p span');

        // console.log(span);

        // let ul = document.querySelector('.one');

        // console.log(ul);

        // let a = document.querySelector('#two');

        // console.log(a);

请控制台输出 第三 li

    <div class="box">
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
            <li>li5</li>
            <li>li6</li>
        </ul>
    </div>
    <script>
        //请控制台输出 第三 li
        let li = document.querySelector('.box ul li:nth-child(3)')
        console.log(li);
    </script>

// 要求:将页面中所有的li标签获取到

        //结论:document.querySelector()一次只能获取一个标签,返回满足条件的第一个

        // document.querySelector('li');

 

        // 通过其他方式获取标签

        // 语法: document.querySelectorAll('css选择器')

        // 总结:

        // a) 返回的结果是一个伪数组(可以像数组一样遍历,但是不能使用数组中的方法)

        // b) 伪数组中保存的每一个值都是一个标签对象

        // c) document.querySelectorAll()返回的结果永远都是一个伪数组

        // console.log(document.querySelectorAll('li'));

代码演示:

        //要求:将每一个li标签输入到控制台中

        // 1.先获取所有的li标签

        let lis = document.querySelectorAll('li')

        for (let i = 0; i < lis.length; i++) {

            console.log(lis[i]);

        }

// 1.通过标签的id获取元素

(标签的id不能重复,只能获取唯一的一个标签)

        // document.getElementById('标签的id名');

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

        // 2.通过标签的名字获取元素

        // document.getElementsByTagName('标签的名字')

        // 返回的结果也是一个伪数组,数组中保存的是标签对象

        console.log(document.getElementsByTagName('div'))

        // 3.通过标签的类名获取元素

        // document.getElementsByClassName('标签的类名')

        // 结论: 返回的结果也是一个伪数组, 页面中标签的类名是可以重复的

        console.log(document.getElementsByClassName('one'))

 // 操作标签中的内容

        // a)获取标签中的内容

        // 语法1:DOM对象.innerText   只获取当前标签的纯文本信息内容,不包括HTML标签

        // 语法2:DOM对象.innerHTML   获取内容既包含html标签也包含标签中的文字

        // 代码演示:获取div标签中的内容

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

        let res = divv.innerText;

        // let res = div.innerHTML;

        console.log(res);

 

        // b)给标签设置内容

        // 1)DOM标签对象.innerText = 值;   设置的内容始终都是以纯文本的形式设置

        // 2)DOM对象.innerHTML = 值;       设置的内容如果包含html标签,则会将html标签渲染为对应的标签

  // 1.操作图片的src属性

        // a)获取图片标签的src属性值

        // 语法:图片DOM标签对象.src

        // 注意:得到的是绝对路径

        // 代码演示:

        /* let img = document.querySelector('img');

        console.log(img.src); */
 

        // b)给图片标签设置src属性(赋值)

        // 语法:图片标签DOM对象.src='路径'

        // 注意:设置的时候,可以写绝对路径也可以写相对路径

// 操作标签样式

        // a)行内样式

        // 语法:DOM标签对象.style.css属性=值;

        // 注意:

        // 1.对象中包含该属性,可以使用,如果不包含则不能用

        // 2.在css属性中如果遇到background-color在js中按照backgroundColor

        // 代码演示:

        let divv = document.querySelector('div');

        divv.style.backgroundColor = 'red';
 

        // 随机颜色

        // 1.定义一个数组

        // let ary = ['pink', 'red', 'skyblue']

        // 2.随机从数组中取出一个演示;'/颜色

        // let i = Math.floor(Math.random() * ary.length);

        // let color = ary[i];

        // 3.获取标签

        // let div = document.querySelector('div')

        // 4.给标签样式赋值

        // div.style.backgroundColor = (color);

 // 标签设置类样式

        // a)语法:DOM标签对象.className='类名';

        // 注意事项:

        // 1)可以通过DOM标签对象.className给标签设置多个类名,类名之间使用空格隔开

        // 2)通过DOM标签对象.className给标签设置类名的时候,会将标签身上原来的类名覆盖掉

        // 3)如果要解决覆盖标签原来的类名,则需要在赋值的时候,重新给标签设置原来的类名即可

        // 代码演示

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

        div.className = 'one two';

        div.style.transition = '2s';

//通过classList方式给标签设置类名(推荐)

        // a)添加类名:   DOM标签对象.classList.add('类名');

        // 特点:

        // 1)不会覆盖标签原来的类名

        // 2)可以添加多个类名,多个类名之间用逗号隔开

        // b)删除类名:   DOM标签对象.classList.remove('类名');

        // 特点:要移除那个类名就设置对应的类名即可,如果要移除多个类名,使用逗号隔开

        // c)切换类名:   DOM标签对象.classList.toggle('类名');

        // 如果标签本身包含切换的类名,则切换的时候删除该类名

        // 如果标签本身不包含切换的类名,则切换的时候添加该类名

        // d)是否包含类名:   DOM标签对象.classList.contains('类名');

        // 如果返回的结果是true,则表示标签包含该类名

        // 如果返回的结果是false,则表示标签不包含该类名

 // 1.操作表单标签内容属性

        // a)获取表单标签中的文字内容: DOM标签对象.value;

        // b)设置表单标签中的文字内容: DOM标签对象.value=值;
 

        // 注意:非表单元素操作内容是否可以使用value属性?不能

        // 2.操作表单标签是否选择属性

        // a)获取标签是否被选中 :  

        DOM标签对象.checked

        // 如果返回的结果为true,代表当前标签被选中

        // 如果返回的结果为false,代表当前标签没有被选中

        /* let r1 = document.querySelector('.r1')

        console.log(r1.checked); */

        // b)设置标签选中:

        // DOM标签对象.checked = true; 设置选中

        // DOM标签对象.checked = false; 未被选中

        /* let r1 = document.querySelector('.r1')

        r1.checked = true; */

        // 3.操作表单按钮是否可以点击属性

        // a)获取按钮的点击状态:  DOM标签对象.disabled

        // 如果返回的结果是false,则代表当前按钮可以点击

        // 如果返回的结果是true,则代表当前按钮不可以点击

        // b)设置按钮点击的状态

        // DOM标签对象.disabled=true;   代表不能被点击

        // DOM标签对象.disabled=false;   代表能点击