day10-Dom操作

概述

DOM（文档对象模型）是一种用于处理HTML和XML文档的编程接口。它定义了一种表示文档的标准模型，使得可以通过编程方式访问和操作文档的内容、结构和样式。通过DOM，可以使用JavaScript等编程语言来访问和修改文档的结构和内容。可以通过DOM提供的方法和属性来查找、添加、删除和修改文档中的元素和属性，或者改变元素的样式和事件处理。在Web开发中，通过DOM可以实现动态地更新页面内容，响应用户的交互操作，以及实现各种功能和效果。
浏览器中红色框的部分为上节介绍的Bom部分，网页的显示区域就是dom区域，也是我们需要编写操作的区域

1. 通过js获取页面上的元素

方法如下：
根据元素属性获取元素，2,3两种方式返回伪数组
1、根据id名来获取： document.getElementById(id名)
2、根据类名来获取： document.getElementsByClassName(类名)
3、根据标签名来获取：document.getElementsByTagName(标签名)
根据css选择器获取， 2 会返回伪数组
1、通过选择器获取，只会匹配第一个： document.querySelector(css选择器)
2、通过选择器获取，获取所有的： document.querySelectorAll(css选择器)

html结构1

<style>
        ul{
            list-style: none;
        }
</style>
<div class="box">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <p id="first">这是p标签</p>
        <p class="text">这是class为text的p标签</p>
    </div>

        var ul = document.getElementById("first")
        var box = document.getElementsByClassName("box")
        var p  = document.getElementsByTagName('li')
        console.log(ul)
        console.log(box)
        console.log(p)
        console.log('-------------------')
        var p_first = document.querySelector('#first')
        var li_first = document.querySelector('li')
        var li = document.querySelectorAll('li')
        console.log(p_first)
        console.log(li_first)  // 指挥获取第一个
        console.log(li)

2. 操作元素

2.1 操作元素的样式

方法如下：
1、设置元素的样式， 通过js给元素设置的样式都是行内样式
元素.style.css属性名 = css属性值
2、 获取元素的样式
元素.style.css属性名
getComputedStyle(元素).css属性名

以上述‘html结构1’的结构为例， 操作页面元素样式。

		// 将box的背景通过操作dom元素变为黄色
        var box = document.querySelector('.box')
        box.style.backgroundColor = 'yellow'
        // 将css样式的 -去掉， 驼峰命名法书写
        // 比如 background-color -> backgroundColor
        console.log(box.style.backgroundColor)
        console.log(getComputedStyle(box).backgroundColor)

2.2 操作元素的类名

1、获取元素的类名
  元素.className
  元素.classList.value
2、设置元素的类名（会覆盖原有的类名）
  元素.className = 类名
  元素.classList.value = 类名
3、新增类名(）
  元素.classList.add(类名)
4、 删除类名
   元素.classList.remove(类名)
5、判断有没有类名
   元素.classList.contains(类名)
以上述‘html结构1’的结构为例， 操作页面元素样式。
首先先写一个类名为active的css，待会通过操作类名给元素添加样式

    <style> 
        ul{
            list-style: none;
        }
        .active{
            background-color: red;
        }
    </style>

	    var li_first = document.querySelector('ul li:first-child')
	    // 添加一个类名
        li_first.classList.add('active')
        console.log(li_first.className)
	 	// 移除一个类名
        li_first.classList.remove('active')
        console.log(li_first.className)

2.3 操作元素属性

1、 原生属性
元素有本身带有的一些属性，例如：img标签的src、 input标签的value 等
2、data- 属性
我们可以给元素添加一个以data-开头 自己定义的属性： 例如 data-age=18 js会将data- 后面的age当作key存储， 18当作对应的值存储。我们一个访问这个自定义的属性。
以上述‘html结构1’的结构为例，更改一些属性

<div class="box">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <!-- 添加一个data-属性 -->
            <li data-index="3">3</li>
        </ul>
        <p id="first">这是p标签</p>
        <p class="text">这是class为text的p标签</p>
    </div>

var img = document.querySelector('img')
        img.src = 'https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
        var liArr = document.querySelectorAll('ul li')
        // 获取
        console.log(liArr[2].dataset.index)
        // 设置
        liArr[2].dataset.index = 999
        console.log(liArr[2].dataset.index)

2.4 操作元素的内容

1、元素.innerHTML
2、元素.innerText
以上述‘html结构1’的结构为例

        var p1 = document.querySelector('#first')
        var p2 = document.querySelector('.text')
        console.log(p1.innerHTML, p1.innerText)
        console.log(p2.innerHTML, p2.innerText)
        p1.innerHTML = '<p style="background-color:red">这是一个新的标签,innerHTML可以解析标签<p>'
        p2.innerText = '<p style="background-color:red">这是一个新的标签,innerText并不能解析标签<p>'
        console.log(p1.innerHTML, p1.innerText)
        console.log(p2.innerHTML, p2.innerText)

2.5 获取元素在dom中的一些信息

1、 获取元素的尺寸
真实的宽度、 真实的高度
- 元素.offsetWidth
- 元素.clientWidth
- 元素.offsetHeight
- 元素.clientHeight
2、获取元素的偏移
偏移：元素左上角点相对于页面左上角点的距离就是偏移
元素的偏移距离是有两个方向的 一个是距离页面左边的偏移 一个是距离页面上边的偏移
左边的偏移量
- 元素.offsetLeft
上边的偏移量
- 元素.offsetTop
-
3、获取元素左边框和上边框的宽度
左边框宽度
- 元素.clientLeft
上边框宽度
- 元素.clientTop

3、利用js来生成、添加、删除、修改、克隆元素

1. 生成： document.createElement(标签名)
2. 添加：父元素.appendChild(子元素) | 父元素.insertBefore(新子元素, 旧子元素)
3. 修改： 修改内容：见2.4 | 修改标签名：父元素.replaceChild(新元素, 旧元素)
4. 删除：父元素.removeChild(子元素)
5. 克隆：要克隆的元素.cloneNode() 只会克隆当前元素 | 要克隆的元素.cloneNode(true) 既会克隆当前元素 也会克隆子元素