DOM树
获取元素
ID获取
developer.mozilla.org/zh-CN/docs/…
document.getElementById(id) // id是大小写敏感的字符串
//返回值为一个元素对象
console.dir(document.getElementById(id)) 打印我们返回的元素对象，更好的查看里面的属性和方法
标签名获取
//返回的是 获取过来元素对象的合集
document.getElementsByTagName('标签名');
//如果页面中只有一个元素对象，返回的依旧是伪数组；
//如果页面中没有元素对象，返回的是空伪数组；
获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName('标签名')
//父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己
方法一：给父元素加id
var ol = document.getElementById('ol'); //给父元素加id
console.log(ol.getElementsByTagName('li')
方法二：
ol[].getElementsByTagName('li')
Html5新增的方法获取（注意兼容性问题）
1、document.getElementsByClassName('类名') // 根据类型获取元素
2、document.querySelector('选择器'） // 返回指定选择器的第一个选项
//切记里面的选择器需要加符号 .nav #nav
3、document.querySelectorAll('选择器'）// 返回指定选择器的所有元素对象合集
获取body、html元素
document.body;
document.documentElement;
事件基础
事件三要素：事件源 事件类型 事件处理程序
1、事件源 事件被触发的对象
document.getElementById(''）；
2、事件类型 如何触发 什么事件 比如鼠标点击（onclick）
3、事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function () {
}
执行事件的步骤
<body>
<button id = 'btn'>唐伯虎</button>
<script>
//1. 获取事件源
var btn = document.getElementById('btn');
//2. 绑定事件 注册事件
//btn.onclick
//3. 添加事件处理程序
btn.onclick = function () {
alert('点秋香'）
}
</script>
</body>
获取元素节点
1、element.childNodes // 获取当前元素的子节点（会包含空白的子节点）
2、element.children // 获取当前元素的子元素
3、element.firstElementChild // 获取当前元素的第一个子元素
4、element.lastElementChild // 获取当前元素的最后一个子元素
5、element.nextElementSibling // 获取当前元素的下一个兄弟元素
6、element.previousElementSibling // 获取当前元素的前一个兄弟元素
7、element.parentNode // 获取当前元素的父节点
8、element.tagName // 获取当前元素的标签名
获取文本节点
在DOM中，在网页中所有的文本内容都是文本节点对象
可以通过元素来获取其中的文本节点对象，但是我们通常不这么做
我们可以直接通过元素去修改其中的文本
修改文本三个属性：
1、element.textContent 获取或修改文本中的文本内容
-- 获取的是标签中的内容，不会考虑css样式
2、element.innerText 获取或修改元素中的文本内容
-- 获取内容会考虑css样式
-- 通过innerText去读取CSS样式，会触发网页的重排（计算css样式）
3、element.innerHTML 获取或修改元素中的html的内容
--可以直接向元素中添加html代码
--有xss注入风险
修改元素
<body>
<div id="btn01">button1</div>
<div id="btn02">button2</div>
<ul id="list">
<div id="swk">孙悟空</div>
<div id="zbj">猪八戒</div>
<div id="shs">沙和尚</div>
</ul>
<script>
// 点击按钮后向ul中添加一个唐僧
// 获取ul
const list = document.getElementById('list')
// 获取按钮
const btn01 = document.getElementById('btn01')
btn01.onclick = function () {
// 创建一个li
const li = document.createElement("li")
// 向li添加文本
li.textContent = '唐僧'
// 给li添加id属性
li.id = 'tc'
//appendChild() 用于给一个节点添加子节点
// list.appendChild(li)
// insertAdjacentElement()可以向元素的任意位置添加元素
// 两个参数：1.要添加的位置；2.要添加的元素
// beforeend 标签的最后 afterbegin 标签的开始
// beforebegin 在元素的前边插入元素（兄弟元素） afterend 在元素的后边插入元素（兄弟元素）
// insertAdjacentElement('beforeend',li)
}
const btn02 = document.getElementById('btn02')
btn02.onclick = function () {
//创建一个蜘蛛精替换孙悟空
const li = document.createElement('li')
li.textContent = "蜘蛛精"
li.id = "zzj"
// 获取swk
const swk = document.getElementById('swk')
swk.replaceWith(li)
//replaceWith() 使用一个元素替换当前元素
// swk.replaceWith(li）
// remove() 方法用来删除当前元素
swk.remove()
}
</script>
操作元素之表单属性设置
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
//1、获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
//2、注册事件
btn.onclick = function () {
//input.innerHTML = '点击了'；这个是普通盒子 比如div标签里面的内容
//表单里面的值 文字内容是通过value来修改的
input.value = '被点击了';
// 如果想把某个表单被禁用 不能再点击disabled
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>
</body>
操作元素-修改样式属性
<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>
div {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.onclick = function () {
this.style.backgroundColor = 'pink';
this.style.width = '300px'
}
</script>
</body>
