JS-DOM
Posted cuter、
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-DOM相关的知识，希望对你有一定的参考价值。
目标:
能够说出什么是DOM
能够获取页面元素
能够给元素注册事件
能够操作DOM元素的属性
能够创建元素
能够操作DOM节点
一、DOM简介
1.1什么是DOM
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言(html或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。
1.2DOM树
文档:一个页面就是一个文档，DOM中使用document表示
元素:页面中所有标签都是元素，DOM中使用element表示
**节点:**网页中所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示
DOM把以上内容都看做是对象
二、获取元素
2.1如何获取页面的元素
2.2根据ID获取
使用getElementById()方法可以获取带有ID元素的对象。
Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
参数:
1.element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
2.id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
返回值
返回一个匹配到 ID 的 DOM Element （元素）对象。若在当前 Document 下没有找到，则返回 null。
<div id="time">2010-9-9</div>
<script>
//1.因为我们文档页面从上往下加载，所以得先有标签，所以script写到标签的下面
//2.get 获得 element 元素 by通过 驼峰命名法
//3.参数 id是大小写敏感的字符串
//4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(typeof timer); //object
console.log(timer); // <div id="time">2010-9-9</div>
//5. console.dir()打印返回的元素对象，更好的查看里面的属性和方法
console.dir(timer);
</script>
2.3根据标签名获取
1.使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
2.还可以获取某个元素(父元素)内部所有指定标签的子元素:
element.getElementsByTagName('标签名');
注意:父元素必须是单个对象（必须指明是哪一个元素对象）.获取的时候不包括父元素自己
<ul>
<li>知否知否，绿肥红瘦1</li>
<li>知否知否，绿肥红瘦2</li>
<li>知否知否，绿肥红瘦3</li>
<li>知否知否，绿肥红瘦4</li>
<li>知否知否，绿肥红瘦5</li>
<li>知否知否，绿肥红瘦6</li>
</ul>
<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
//1.返回的是 获取过来元素对象的集合 以伪数组的形式存储
var getLi = document.getElementsByTagName('li');
console.log(getLi);
console.log(getLi[0]);
//2.依次打印里面的元素对象，采取遍历的形式
for (var i = 0; i < getLi.length; i++) {
console.log(getLi[i]);
}
//3.如果页面中只有一个li 返回的还是伪数组的形式
//4.如果页面中没有这个元素 返回的是一个空的伪数组
//5.element.getElementsByTagName('标签名'); 父元素是指定的单个元素
// var getOl = document.getElementsByTagName('ol');//[ol]
// console.log(getOl[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
2.4通过HTML5新增的方法获取
1.document.getElementsByClassName(‘类名’)；//根据类名返回元素集合
2. document.querySelector(‘选择器’); //根据指定选择器返回第一个元素对象 切记里面的选择器需要加符号 .box #nav
3. document.querySelectorAll(‘选择器’) 返回指定选择器的所有选择对象
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1.document.getElementsByClassName('类名')；//根据类名返回元素集合
var box = document.getElementsByClassName('box');
console.log(box);
for (var i = 0; i < box.length; i++) {
console.log(box[i]);
}
//2. document.querySelector('选择器'); //根据指定选择器返回第一个元素对象 切记里面的选择器需要加符号 .box #nav
var fibox = document.querySelector('.box');
console.log(fibox);
var ida = document.querySelector('#nav');
console.log(ida);
var li = document.querySelector('li');
console.log(li);
//3. document.querySelectorAll('选择器') 返回指定选择器的所有选择对象
var all = document.querySelectorAll('.box');
console.log(all);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
2.5获取特殊元素(body，html)
获取body元素
//1.获取body元素
var body = document.body;
console.log(body);
console.dir(body);
获取html元素
//2.获取html元素
// var htmlele = document.html;
// console.log(htmlele); //undefined
var htmlele = document.documentElement;
console.log(htmlele);
三、事件基础
3.1 事件概述
javascript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解:触发–响应机制
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
3.2事件三要素
事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
<button id="btn">请点击我</button>
<button class="btnl" onclick="onclickT()">唐伯虎</button>
<script>
//点击一个按钮 弹出对话框
//1.事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1)事件源:事件被触发的对象 谁 上面html的按钮!
var btn = document.getElementById('btn');
//(2)事件类型: 如何触发 什么事件 比如鼠标点击(onclick())，还是鼠标经过 还是键盘按下
//(3)事件处理程序 ：通过一个函数赋值的方式来完成
btn.onclick = function() {
alert('你好');
}
//法二
var btnl = document.querySelector('.btnl');
function onclickT() {
alert('点秋香');
}
</script>
3.3执行事件步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
<div id="div" style="cursor: pointer;">很漂亮</div>
<script>
//执行事件步骤
//点击div 输出 你被选中了
//1.获取事件源
var div = document.getElementById('div');
//2.绑定事件 注册事件
//div.onclick
//3.添加事件处理程序
div.onclick = function() {
alert('你被选中了')
}
</script>
常见的鼠标事件
3.4分析事件三要素
1.下拉菜单三要素
2.关闭广告三要素
四、操作元素
JavaScript的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。
4.1改变元素内容
1.innerText
element.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
例子
<div></div>
<p>我是文字
<span>123</span>
</p>
//1.innerText 不识别html标签 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<strong>今天是</strong>:2021';
结果
2.innerHTML 使用最多 W3C标准
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
例子
<div></div>
<p>我是文字
<span>123</span>
</p>
//inner和innerhtml的区别
//1.innerText 不识别html标签 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是</strong>:2021';
//2.innerHTML 识别html标签 W3C标准
div.innerHTML = '<strong>今天是</strong>:2021';
结果
源码
<div></div>
<p>我是文字
<span>123</span>
</p>
<script>
//inner和innerhtml的区别
//1.innerText 不识别html标签 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<strong>今天是</strong>:2021';
//2.innerHTML 识别html标签 W3C标准
div.innerHTML = '<strong>今天是</strong>:2021';
//这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
案例 innerText
<button id="btn">显示当前系统时间</button>
<div class="time">某个时间</div>
<p>11235</p>
<script>
//当我点击按钮 div里面的文字发生变化
//1.获取元素
var btn = document.getElementById('btn');
var div = document.querySelector('.time');
//2.注册事件
btn.onclick = function() {
div.innerText = getTime();
}
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
}
//我们元素可以不用添加事件，就直接改变原有内容，直接显示
var p = document.querySelector('p');
p.innerText = getTime();
</script>
4.2常用元素的操作属性
1.innerText、innerHTML改变元素内容
2.src，href
3.id、alt、title
案例1
<body>
<img src="../img/z.gif" alt="">
<div>早上好</div>
<script>
//获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
//得到当前小时数
var dateGet = new Date();
var h = dateGet.getHours();
if (h < 12) {
img.src = '../img/s.gif'
div.innerHTML = '亲,上午好，好好写代码';
} else if (h < 18) {
img.src = '../img/x.gif';
div.innerHTML = '亲，下午好，好好写代码';
} else {
img.src = '../img/w.gif';
div.innerHTML = '亲,晚上好，好好写代码';
}
</script>
</body>
案例2
<style>
button {
cursor: pointer;
}
img {
display: block;
width: 300px;
}
</style>
</head>
<body>
<button id="zjl">周杰伦</button>
<button id="hg">胡歌</button>
<img src="../img/zjl.jpg" alt="" title="周杰伦">
<script>
//修改属性 src
//1.获取元素
var zjl = document.getElementById('zjl');
var hg = document.getElementById('hg');
var img = document.querySelector('img');
//2.注册事件
hg.onclick = function() {
img.src = '../img/huge.jpg';
img.title = '胡歌';
}
zjl.onclick = function() {
img.src = '../img/zjl.jpg';
img.title = '周杰伦';
}
</script>
</body>
4.3.表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
type、value、checked、selected、disabled
<button>按钮</button>
<input type="text" value="输入内容" name="" id="">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
//注册事件 处理程序
btn.onclick = function() {
// input.innerHTML = '我很好'; //这个是普通盒子 比如div标签里面的内容
input.value = '我很好'; //表单里面的值 文字内容是通过value来修改的
//如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮button禁用
//this 指向的是时间函数的调用者 btn
this.disabled = true; // btn.disabled = true;
}
</script>
显示密码案例
<div class="box">
<label for="">
<img src="../img/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onclick = function() {
//点击一次后 flag一定要变化
if (flag == 0) {
eye.src = '../img/open.png'
pwd.type = 'text';
flag = 1;
} else {
eye.src = '../img/close.png'
pwd.type = 'password'
flag = 0;
}
}
</script>
4.4样式属性操作（element.style）
我们可以通过JS修改元素的大小、颜色、位置等样式
1.element.style 行内样式进行操作
2.element.className 类名样式进行操作
注意
1.JS里面的样式采取驼峰命名法，比如 fontSize、backgroundColor
2.JS修改style样式操作，产生（生成）的是行内样式，css权重比较高
点击改变div的颜色和宽度
this.style=div.style
以上是关于JS-DOM的主要内容，如果未能解决你的问题，请参考以下文章