JS基础第二课（元素篇）
介绍元素前，带小伙伴们了解一下，什么是DOM？🧐
2、XML 是一种标记语言类似html，被设计用来传输和存储数据
3、DOM可以把网页和脚本语言以及其他编程语言联系起来
4、DOM开发中主要用于操作元素（因此DOM与元素紧密相连）
（2）获取指定元素对象集合，一样需要循环遍历来取标签
（2）通过dom.addEventListener事件类型
（2）修改获取标签文本
修改后：
修改后：
2、创建节点：document.createElement("标签名")
3、添加节点：添加的位置.appendChild(添加的节点)
4、删除节点：选择.removeChild(节点)
5、复制节点/克隆节点
cloneNode(true)：克隆整个节点包括里面的内容
cloneNode(false)：克隆节点不包括里面的内容
一、DOM：全称Document Object Model(文档对象模型)
1、用于HTML和XML文档的编辑接口，给文档提供一种结构化的表示方法，可以修改文档的内容和结构2、XML 是一种标记语言类似html，被设计用来传输和存储数据
3、DOM可以把网页和脚本语言以及其他编程语言联系起来
4、DOM开发中主要用于操作元素（因此DOM与元素紧密相连）
二、获取元素的五种方式
1、根据ID获取：
返回元素对象（仅获取到匹配的第一个元素的标签）
<div id="box"></div>
<div id="box"></div>
<script>
var boxDom = document.getElementById('box')
console.log(boxDom);
</script> 2、根据类名获取：
返回元素的对象集合（类似数组），注意不是标签！需要通过循环遍历，来获取最终需要的标签
<h1 class="title">标题</h1>
<h1 class="title">标题</h1>
<script>
var titleDom = document.getElementsByClassName('title')
console.log(titleDom);
for (var i = 0; i < titleDom.length; i++) {
console.log(titleDom[i]);
}
</script> 3、根据标签名获取：
返回带有指定标签名的对象集合（类似数组），不是标签！与类名获取同样，需要通过循环遍历，来获取最终需要的标签
<p>段落</p>
<p>段落</p>
<script>
var pDom = document.getElementsByTagName('p')
console.log(pDom);
for (var i = 0; i < pDom.length; i++) {
console.log(pDom[i]);
}
</script> 4、根据选择器获取
【注意：选择器对应的符号不能漏，不能错（class对应. ）、（id对应# ）】
（1）获取指定元素的第一个对象
<div id="box"></div>
<script>
var box =document.querySelector('#box')
console.log(box);
</script> <div id="box"></div>
<div id="box"></div>
<script>
var box =document.querySelectorAll('#box')
console.log(box);
for (var i = 0; i < box.length; i++) {
console.log(box[i]);
}
</script> （3）获取子级对象（querySelector也可以直接获取标签名）
<div class="demo">
<p>段落</p>
<p>段落</p>
</div>
<script>
var demoArr = document.querySelectorAll('.demo p')
console.log(demoArr);
</script> 5、根据特殊元素获取
（1）获取body
（2）获取html
<div class="demo"> <p>段落</p> <p>段落</p> </div> <script> var bodyDom = document.body console.log(bodyDom); var htmlDom = document.documentElement console.log(htmlDom); </script>
三、事件（HTML DOM 事件 (w3school.com.cn)）
1、组成
（1）事件源：触发的对象
（2）事件类型：如何触发
（3）事件处理程序：通过函数响应事件
2、三种写法（用监听按钮事件为例子）
（1）通过dom事件类型【常用】
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var list = document.querySelectorAll('li')
console.log(list);
for (var i = 0; i < list.length; i++) {
console.log(list[i]);
list[i].onclick = function(){
alert('点击成功')
}
}
</script> （2）通过dom.addEventListener事件类型
<div class="box">点击</div>
<script>
var divDom = document.querySelector('.box')
console.log(divDom);
divDom.addEventListener('click',function(){
alert('点击成功')
})
</script> （3）直接在标签上编写<标签名 οnclick="方法">确定</标签名>【常用】
例①
<body>
<div onclick="alert('OK')">请点击</div>
</body> 例②<!-- 注意值是一个方法，不能漏了() -->
<div onclick="divClick()">请点击</div>
<script>
function divClick(){
alert('点击成功')
}
</script> 3、其他例子：焦点离开、焦点聚集
<input type="text" onfocus="iptfoucs()">
<script>
var inputDom = document.querySelector('input')
inputDom.onblur = function(){
console.log('焦点离开');
}
function iptfoucs(){
console.log('焦点聚焦');
}
</script> 四、操作元素
1、概念：
JavaScript的DOM操作可以改变网页内容、结构和样式，通过利用Dom操作元素来改变元素里面的内容、属性等
注意：事件和操作元素都是对标签进行操作的
2、改变获取元素的内容
（1）修改获取文本内容
<h1>标题</h1>
<button>修改</button>
<script>
var title = document.querySelector('h1')
console.log(title);
var btn = document.querySelector('button')
btn.onclick = function(){
title.innerText = '修改成功'
}
</script> <h1>标题</h1>
<button>修改</button>
<script>
var title = document.querySelector('h1')
console.log(title);
var btn = document.querySelector('button')
btn.onclick = function(){
title.innerHTML = '<a href="">修改成功</a>'
console.log(title.innerHTML);//<a href="">修改成功</a>
console.log(title.innerText);//修改成功
}
</script> 3、修改获取元素属性（dom.属性名 = 修改值）
<h1 title="我是标题">标题</h1>
<button>修改属性</button>
<script>
var h1Dom =document.querySelector('h1')
var btn = document.querySelector('button')
btn.onclick =function(){
h1Dom.title='我不是标题'
}
</script> 4、修改样式属性
（1）格式：dom.style.样式属性 = 值
（2）适用于较少的样式修改
（3）复合型的属性需要用驼峰的编写方法，否则会出错
<div></div>
<button>修改属性</button>
<script>
var divDom = document.querySelector('div')
var btn = document.querySelector('button')
btn.onclick = function(){
divDom.style.backgroundColor = 'red'
divDom.style.width = '200px'
}
</script> 修改前：修改后： 5、使用className修改样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.default {
width: 100px;
height: 100px;
background-color: skyblue;
color: white;
margin-bottom: 10px;
}
.active {
background-color: red;
color: yellowgreen;
}
</style>
</head>
<body>
<div class="default">div</div>
<div class="default">div</div>
<div class="default">div</div>
<button>点击修改</button>
<script>
var divArr = document.querySelectorAll('.default')
var btn = document.querySelector('button')
btn.onclick =function(){
for(var i =0;i<divArr.length;i++ ){
divArr[i].className = 'default active'
}
}
</script>
</body>
</html> 修改前：修改后：6、HTML标签自定义属性
（1）目的：为了保存属性并使用的数据
（2）设置属性：setAttribute('属性名','值')
（3）获取属性：getAttribute('属性名')
<h1 index="0">我是标签</h1>
<script>
var h1 = document.querySelector('h1')
h1.setAttribute('idid',666)
console.log(h1.getAttribute('idid'));
console.log(h1.getAttribute('index'));
</script> 五、节点操作
1、节点层级
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<script>
// 获取最近的父节点
var box1 = document.querySelector('#box1')
console.log(box1.parentNode);
// 获取所有的子节点
var box = document.querySelector('#box')
console.log(box.childNodes);
// 获取第一个子节点
console.log(box.firstElementChild);
// 获取最后一个子节点
console.log(box.lastElementChild);
// 上一个兄弟
var box2 = document.querySelector('#box2')
console.log(box2.previousElementSibling);
// 下一个兄弟
console.log(box2.nextElementSibling);
</script> 2、创建节点：document.createElement("标签名")
3、添加节点：添加的位置.appendChild(添加的节点)
4、删除节点：选择.removeChild(节点)
5、复制节点/克隆节点
cloneNode(true)：克隆整个节点包括里面的内容
cloneNode(false)：克隆节点不包括里面的内容
<ul>
<li>1</li>
</ul>
<button class="add">添加</button>
<button class="del">删除</button>
<script>
var btn1 = document.querySelector('.add')
var btn2 = document.querySelector('.del')
var ul = document.querySelector('ul')
btn1.onclick = function(){
var newli = document.createElement('li')//创建节点
var liArr = document.querySelectorAll('li')
for (var i = 0; i <= liArr.length; i++) {
newli.innerHTML = i+1;
}
ul.appendChild(newli);//添加节点
}
btn2.onclick = function(){
ul.removeChild(ul.lastElementChild);//删除ul的最后一个孩子
}
//克隆节点
var newNode = document.createElement('div')//创建节点
newNode.innerHTML = '你好'//修改文本内容
var cloneDom1 = newNode.cloneNode(true)
var cloneDom2 = newNode.cloneNode(false)
console.log(cloneDom1);
console.log(cloneDom2);
</script> JS及JQuery框架 文章被收录于专栏
JavaScript的基本语法（变量、数据类型、运算符等等），流程控制（顺序、分支、循环），数组，函数（作用域、预解析），对象（自定义、内置），DOM（节点操作、获取元素），BOM（定时器、回调函数、同步异步） JQuery框架的入口函数，隐式迭代，排他思想，链式编程，样式操作，属性操作，事件监听
投递比亚迪等公司10个岗位 >
美团公司氛围 1903人发布