1. 什么是DOM?
文档对象模型(Document Object Model, 简称 DOM), 是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
2. DOM作用:
由W3C已经定义了一系列的DOM接口, 通过这些DOM接口可以改变网页的内容, 机构和样式.
说白了DOM就是用来处理网页的
文档: 一个页面就是一个文档, DOM中使用document表示
元素: 页面中所有的标签都是元素, DOM中使用 element 表示
节点: 网页中所有内容都是节点 (标签, 属性, 文本, 注释等), DOM中使用node表示
DOM 把以上内容都看作是对象
3. 我们如何获取页面中的元素?
有四种方法:
根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取
4.介绍 getElementById()
方法getElementById(),返回的是一个元素对象
<!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>
</head>
<body>
<div id="time">2019-9-9</div>
<script>
var times = document.getElementById('time');
// console.log(times);
// console.log(typeof times);
// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(times);
</script>
</body>
</html>
5.介绍getElementByTagName() 方法
使用 getElementsByTagName() 方法可以返回带有指定标签签名的对象的集合
返回的是 获取过来元素对象的集合 以伪数组的形式存储的
6. 介绍element.getElemenntsByTagName('标签名');
根据标签名获取:
还可以获取某个元素(父元素)内部所有指定标签名的子元素
element.getElemenntsByTagName('标签名');
其中 父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己
<!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>
</head>
<body>
<ul>
<li>加油</li>
<li>从今天开始变得更好</li>
<li>不怕吃苦</li>
<li>我们都可以坚持</li>
<li>不怕困难</li>
<li>我们总能克服</li>
</ul>
<script>
//返回的是 获取过来元素对象的集合 都是以伪数组的形式存储的
var arr = document.getElementsByTagName('li');
// console.log(arr);
// console.log(arr[0]);
// 2.我们想要依次打印里面的元素对象 我们可以采取遍历的方式
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 3.如果页面中只有一个li 返回的还是伪数组的形式
// 4.如果页面中没有这个元素 返回的还是空的伪数组的形式
</script>
</body>
</html>
7.H5新增获取元素方式
<!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>
</head>
<body>
<div class="box1">饭盒1</div>
<div class="box">饭盒2</div>
<div id="nav">
<ul>
<li>加油</li>
<li>从今天开始变得更好</li>
<li>不怕吃苦</li>
<li>我们都可以坚持</li>
<li>不怕困难</li>
<li>我们总能克服</li>
</ul>
</div>
<script>
// 1. getElementsByClassName() 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box1');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号
var firstBox = document.querySelector('.box')
// 3.querySelectorAll() 返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
// 4.获取body 元素
var bodyEle = document.body;
console.log(bodyEle);
// 5.获取HTML元素
var HTMLEle = document.documentElement;
console.log(HTMLEle);
</script>
</body>
</html>
8.什么是事件?
所谓事件 说白了就是 触发然后响应的机制
事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称之为事件的三要素
1) 事件的组成
1. 事件源: 就是事件被触发的对象 ==>简单理解就是谁被触发了
2.事件类型: 就是如何触发 比如:鼠标点击(onclick) 还是鼠标经过 还是键盘按下
3.事件处理程序: 通过一个函数赋值的方式完成
<!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>
</head>
<body>
<button id="btn">学起来</button>
<script>
// <!-- 1. 事件源: 就是事件被触发的对象 ==>简单理解就是谁被触发了 -->
var btn = document.getElementById('btn');
// <!-- 2.事件类型: 就是如何触发 比如:鼠标点击(onclick) 还是鼠标经过 还是键盘按下 -->
// <!-- 3.事件处理程序: 通过一个函数赋值的方式完成 -->
btn.onclick = function() {
alert('你一定可以');
} //这是一个最简单的事件
</script>
</body>
</html>
2) 执行事件的步骤
1.获取事件源
2.注册事件( 绑定事件 )
3. 添加事件处理程序 (采取函数复制形式)
<!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>
</head>
<body>
<div>123</div>
<script>
var div = document.querySelector('div'); //事件源
div.onclick = function() { //其中的 div.onclick叫做事件绑定
// 整个叫做添加函数处理程序
alert('我被选中了');
}
</script>
</body>
</html>
3) 常见的鼠标事件
| 鼠标事件 | 触发条件 |
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
9.操作元素(DOM中核心重点)
JavaScript的DOM操作可以改变网页内容, 结构和样式, 我们可以利用DOM操作元素改变元素里面的内容, 属性等.
1.改变元素内容
element.innerText
从起始位置到终止位置的内容, 但它不包括HTML标签, 而且空格和换行也会去掉
element.innerHTML
从起始位置到终止位置的全部内容, 包括html标签, 通识保留空格和换行
2.innerText 和 innerHTML的区别:
重点就一句话: innerHTML推荐使用
以下为进一步解释:
1.innerText 不识别HTML标签 不是W3C规定的标准 同时去除空格和换行
2. innerHTML可以识别HTML标签 也是W3C规定的标准 保留空格和换行
<!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>
</head>
<body>
<div></div>
<p>
我爱坚持 因为坚持很酷
<span>变得优秀只是第一步</span>
</p>
<script>
// 1.innerText 不识别html标签 非标准
var div = document.querySelector('div')
// div.innerText = '<strong> 会变成粗体吗</strong> 不会';
// 2. innerHTML 可以识别html标签 且是W3C的标准
div.innerHTML = '<strong> 会变成粗体吗</strong> 会';
var p = document.querySelector('p');
console.log(p.innerText); // innerText会消除空格 和 换行
console.log(p.innerHTML); // innerHTML不会消除空格 和 换行
</script>
</body>
</html>
3.修改元素属性
<!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>
</head>
<body>
<button id="sky">天空</button>
<button id="hard">努力</button>
<img src="js.jpg" alt="" title="天空">
<script>
// 1.获取事件源
var sky = document.getElementById('sky');
var hard = document.getElementById('hard');
var img = document.querySelector('img');
// 2.注册事件 // 3.添加事件处理程序
sky.onclick = function () {
img.src = 'js.jpg';
}
hard.onclick = function () {
img.src = '项目.jpg';
}
</script>
</body>
</html>
4.修改表单中的属性
innerHTML这个是用来修改 普通盒子 比如 div标签里面的内容的
而表单元素里面的值 文字内容是通过value来修改
<!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>
</head>
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1.获取事件源
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2.注册事件 3.添加事件处理程序
btn.onclick = function () {
input.value = '从今天开始我要优秀';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
btn.disabled = true;
}
</script>
</body>
</html>
5. element.属性 是可以获取内置属性值 (就是元素本身自带的属性)
element.getAttribute('属性'); 主要是获取自定义属性(标准) 就是我们程序员自己定义的属性
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
