文章目录

JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作（二）

一、DOM介绍

DOM 全称—— Document Object Model是一整套操作文档相关内容的属性和方法。
可以用它来操作元素修改样式；
操作元素修改属性；
操作元素改变位置；
操作元素添加事件等。

二、获取元素的方式

1. 根据id名称获取

语法：document.getElementById(‘id名称’)
作用：获取文档流中ID 名对应的一个元素
返回值：
如果有 id 对应的元素，就是这个元素
如果没有 id 对应的元素，就是 null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div class="box" id="container">你好</div>
<script>
    //根据id获取页面元素
    var ele = document.getElementById('container')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

2. 根据元素 类名 获取

语法：document.getElementsByClassName(‘元素类名’)
作用：获取文档流中 所有 类名对应的元素
返回值：必然是一个伪数组
如果有 类名 对应的元素，有多少获取多少
如果没有 类名 对应的元素，就是 空的伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
<script>
    //根据id获取页面元素
    var ele = document.getElementsByClassName('box')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

3. 根据元素 标签名 获取

语法：document.getElementsByTagName(‘标签名’)
作用：获取文档流中 所有 标签名对应的元素
返回值：必然是一个伪数组
如果有 标签名 对应的元素，有多少获取多少
如果没有 标签名 对应的元素，就是 空的伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
<script>
    //根据id获取页面元素
    var ele = document.getElementsByTagName('div')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

4. 根据 选择器 获取一个

语法：document.querySelector(‘选择器’)
作用：获取文档流中 满足选择器规则的 第一个 元素
返回值：
如果有 选择器 对应的元素，获取到第一个
如果没有 选择器 对应的元素，就是 null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
<script>
    //根据id获取页面元素
    var ele = document.querySelector('.box')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

5. 根据 选择器 获取一组

语法：document.querySelectAll(‘选择器’)
作用：获取文档流中 所有 满足选择器对应的元素
返回值：必然是一个伪数组
如果有 选择器 对应的元素，有多少获取多少
如果没有 选择器 对应的元素，就是 空的伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
<script>
    //根据id获取页面元素
    var ele = document.querySelectorAll('.box')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

三、操作元素内容

1.操作元素 文本 内容

获取：元素.innerText
设置：元素.innerText = ‘新内容’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <button>操作内容</button>
    <div>
        <p>文本内容</p>
    </div>
<script>
    //获取元素
    var ele = document.querySelector('div')
    var btn = document.querySelector('button')
    //获取元素的文本内容
    console.log(ele.innerText)
    
	//发生事件：点击按钮后，文本内容修改
    btn.onclick = function () {
   
    	//设置 div 内的超文本内容
        ele.innerText = '新内容'
    }
</script>
</body>
</html>

2. 操作元素 超文本 内容

获取：元素.innerHTML
设置：元素.innerHTML = ‘新内容’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <button>操作内容</button>
    <div>
        <p>文本内容</p>
    </div>

<script>
    //获取元素
    var ele = document.querySelector('div')
    var btn = document.querySelector('button')
    //获取元素的文本内容
    console.log(ele.innerHTML)

    //给按钮绑定点击事件
    btn.onclick = function () {
   
        //设置 div 内的超文本内容
        ele.innerHTML = '新内容'
    }
</script>
</body>
</html>

四、操作元素属性

1. 原生属性

获取：元素.属性名
设置：元素.属性名 = ‘属性值’

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <button>操作属性</button>
    <div id="box">div标签</div>
    <input type="password">
<script>
    //获取元素
    var btn = document.querySelector('button')
    var box = document.querySelector('div')
    var inp = document.querySelector('input')

    //获取元素属性
    console.log(box.id)
    console.log(inp.type)

    //给按钮绑定点击事件,点击后box的id值与input的类型发生变化
    btn.onclick = function () {
   
        //修改元素属性
        box.id = 'content'
        inp.type = 'checkbox'
    }
</script>
</body>
</html>

2. 自定义属性

获取：元素.getAttribute(‘属性名’)
设置：元素.setAttribute(‘属性名’,‘属性值’)
删除：元素.removeAttribute(‘属性名’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <button id="btn_1">修改属性</button>
    <button id="btn_2">删除属性</button>
    <div id="box" hello="world">div标签</div>
<script>
    var btn_1 = document.querySelector('button')
    var box = document.querySelector('div')

    //获取自定义属性
    var res = box.getAttribute('hello')
    console.log(res)

    //给按钮绑定点击事件
    btn_1.onclick = function () {
   
        //修改自定义属性
        box.setAttribute('hello','新来的')
    }

    btn_2.onclick = function () {
   
        //删除自定义属性
        box.removeAttribute('hello')
    }
</script>
</body>
</html>

五、操作元素类名

获取：元素.className
设置：元素.className = ‘新类名’

	//获取元素
	var btn = document.querySelector('button')
	var box = document.querySelector('div')

	//获取类名
    console.log(box.className)

    //给按钮绑定点击事件
    btn.onclick = function () {
   
        //设置div的类名
        box.className = 'box'
    }

六、操作元素行内样式

获取：元素.style.样式名
设置：元素.style.样式名= ‘样式值’
注意：只能获取和设置元素的 行内样式

<button>操作样式</button>
<div style="width: 100px; height: 100px; background-color: blue">文本内容</div>

	//获取元素
    var box = document.querySelector('div')
    var btn = document.querySelector('button')

    //获取样式
    console.log(box.style.width)
    console.log(box.style.height)
    console.log(box.style.backgroundColor)

    //给按钮绑定点击事件
    btn.onclick = function () {
   
        //设置div样式
        box.style.width = '200px'
        box.style.height = '300px'
        box.style.backgroundColor = 'skyblue'   //将background-color修改为驼峰命名法
    }

七、获取元素非行内样式

获取：window.getComputedStyle(元素).样式名
注意：可以获取行内样式，也可以获取非行内样式
//获取非行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
    <style>
        div{
   
            font-size: 30px;
        }
    </style>
</head>
<body>
<button>操作样式</button>
<div style="width: 100px; height: 100px; background-color: blue">文本内容</div>
<script>
    //获取元素
    var box = document.querySelector('div')
    var btn = document.querySelector('button')

    //获取非行内样式
    console.log(window.getComputedStyle(box).width)
    console.log(window.getComputedStyle(box).height)
    console.log(window.getComputedStyle(box).backgroundColor)
    console.log(window.getComputedStyle(box).fontSize)
</script>
</body>
</html>

总结

1.获取元素

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()

2.操作元素内容

文本内容：元素.innerText
超文本内容：元素.innerHTML

3. 操作元素原生属性

获取：元素.属性名
设置：元素.属性名 = ‘属性值’

4. 操作元素自定义属性

获取：元素.getAttribute()
设置：元素.setAttribute()
删除：元素.removeAttribute()

5. 操作元素类名

获取：元素.className
设置：元素.className = ‘新类名’

6. 操作元素行内样式

获取：元素.style.样式名
设置：元素.style.样式名= ‘样式值’

7. 获取元素非行内样式

window.getComputedStyle(元素).样式名

文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?p=35&share_source=copy_web