html--JavaScript之DOM (文档对象模型)
一、简介
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。
二、查找元素
2.1、直接查找
| 方法名 | 描述 |
| document.getElementById("id") | 获取有指定惟一ID属性值文档中的元素 |
| document.getElementsByTagName("tab") | 返回当前元素中有指定标记名的子元素的数组 |
| document.getElementsByClassName("name") | 根据class属性获取标签集合 |
| document.getAttribute("title") | 返回元素的属性值，属性由name指定 |
2.2、间接查找
| 属性名 | 描述 |
| childNodes | 返回当前元素的所有子元素 |
| firstChild | 返回当前元素的第一个下级子元素 |
| lastChild | 返回当前元素的最后一个子元素 |
| nextSibling | 返回紧跟在当前元素后面的元素 |
| previousSibling | 返回紧跟在当前元素前面的元素 |
| parentElement | 返回其父节点标签元素 |
| children | 返回其所有子标签 |
| firstElementChild | 返回第一个子标签元素 |
| lastElementChild | 返回最后一个子标签元素 |
| nextElementtSibling | 返回下一个兄弟标签元素 |
| previousElementSibling | 返回上一个兄弟标签元素 |
三、操作元素
3.1、动态创建内容时所用的W3C DOM属性和方法
| 属性/方法 | 描述 |
| document.createElement_x(tagName) | 文档对象上的createElement_x方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素 |
| document.createTextNode(text) | 文档对象的createTextNode方法会创建一个包含静态文本的节点 |
| <element>.appendChild(childNode) | appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。 |
| <element>.setAttribute(name, value) | 这些方法分别获得和设置元素中name属性的值 |
| <element>.insertBefore(newNode, targetNode) | 将节点newNode作为当前元素的子节点插到targetNode元素前面 |
| <element>.removeAttribute(name) | 这个方法从元素中删除属性name |
| <element>.removeChild(childNode) | 这个方法从元素中删除子元素childNode |
| <element>.replaceChild(newNode, oldNode) | 这个方法将节点oldNode替换为节点newNode |
| <element>.hasChildnodes() | 这个方法返回一个布尔值，指示元素是否有子元素 |
3.2、标签内容
innerText 获取标签文本内容
innerHTML 获取HTML内容
value 获取值，即form提交表单的值
示例：
<div class="liang"></div>
<div class="yu"></div>
<input class="sheng" type="text" value="yusheng_liang">
<script>
document.getElementsByClassName("liang").innertext = ; // 获取类名为liang的标签并把内容改为123
document.getElementsByClassName("yu").innerHTML = ; //获取类名为yu的标签并把内容改为456
document.getElementsByClassName("sheng").value = "你好"; //获取类名为sheng的标签并把内容改为你好
</script>
3.3、属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
示例：通过自定义属性可以做一个全选，反选，取消选择的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择练习</title>
</head>
<body>
<div class="host">
<p>我的爱好：</p>
<div id="cont">
<input type="checkbox" class="ck" value="">游泳
<input type="checkbox" class="ck" value="">篮球
<input type="checkbox" class="ck" value="">台球
</div>
<div id="but">
<input type="button" value="全选" onclick="Select()">
<input type="button" value="取消" onclick="Canclall()">
<input type="button" value="反选" onclick="Recvall()">
</div> <script>
function Select() {
var target = document.getElementsByClassName("ck");
for(var i = ; i < target.length; i++){
var check = target[i];
check.checked=true;
}
}
function Canclall() {
var target = document.getElementsByClassName("ck");
for(var i = ; i < target.length; i++){
var check = target[i];
check.checked = false;
}
}
function Recvall() {
var target = document.getElementsByClassName("ck");
for(var i = ; i < target.length; i++){
var check = target[i];
if(check.checked){
check.checked = false;
}else{
check.checked = true;
}
}
}
</script> </div> </body>
</html>
3.4、class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
这个东西的用处很大，比如京东里面，当我们鼠标放到全部商品的时候，下面就出现好多商品，其商品是属于隐藏的，触发事件以后他才显示出来，其中间的操作就是定义了一个css隐藏属性，鼠标放上去后，移除CSS隐藏属性；鼠标移走又把隐藏属性给添加上去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<span onmouseover="mouOver();" onmouseout="mouOut();">放这上面有东西出来，不放东西又消失</span>
<div class="hide" id = "d1" style="font-size: 60px">我正在学习javascript</div>
<script>
function mouOver() {
document.getElementById("d1").classList.remove("hide");
}
function mouOut() {
document.getElementById("d1").classList.add("hide");
}
</script>
</body>
</html>
3.5、标签操作
我们可以通过dom创建标签，添加到指定位置，下面给大家举两种方法来操作标签
// 方式一
var zhang = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",zhang);
xxx.insertAdjacentElement('afterBegin',document.createElement('a')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二
var tag = document.createElement('div')
xxx.appendChild(tag) //往后追加一个div元素
xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根据索引
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text">
<input type="button" value="添加" onclick="Add(this);">
</div>
<div>
<ul id="con">
<li>北京</li>
<li>上海</li>
</ul>
</div> <script>
function Add(ths) {
var val = ths.previousElementSibling.value;
ths.previousElementSibling.value="";
var target = document.getElementById('con');
// //第一种方式：创建字符串的方式
// var str = "<li>" + val + "</li>";
// // beforeBegin 外部上边
// // beforeEnd 内部的最后
// // afterBegin 内部开始
// // afterEnd 外部的最后
// target.insertAdjacentHTML("beforeEnd", str); //第二种方式：元素的方式
var tar = document.createElement('li');
tar.innerText = val;
target.appendChild(tar); }
</script>
</body>
</html>
3.6、样式操作
<body>
<div id = i1>我正在学习javascript</div>
<script>
var obj = document.getElementById('i1');
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
</script>
</body>
示例二：模拟输入框中的提示信息内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.gg{
color: darkgray;
}
.bb{
color: black;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入内容">
<p>当鼠标放上去的时候，“请输入内容”字样消失</p>
<p>当鼠标移除的时候，“请输入内容字样”显示</p>
<input type="text" class="gg" value="请输入内容" onfocus="Focus(this);" onblur="Blur(this);"> <script>
function Focus(ths) {
ths.className = "bb";
var ret_val = ths.value;
if(ret_val == "请输入内容"){
ths.value = "";
} } function Blur(ths) {
var ret_val = ths.value;
if(ret_val == "请输入内容" || ret_val.trim().length == ){
ths.value="请输入内容";
ths.className = "gg";
}
}
</script> </body>
</html>
图示：
3.7、位置操作
总文档高度
document.documentElement.offsetHeight 当前文档占屏幕高度
document.documentElement.clientHeight 自身高度
tag.offsetHeight 距离上级定位高度
tag.offsetTop 父定位标签
tag.offsetParent 滚动高度
tag.scrollTop
看到这些大家有没有想到网页右下角有个返回顶部，一点就返回到上面了，对没错就是计算这些高度；还有当你鼠标往下拉的时候，左边菜单栏相对应的样式都会变。
示例：返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.hide{
display: none;
}
.to-top{
position: fixed;
right: 28px;
height: 45px;
width: 40px;
bottom: 20px;
background-color: cornflowerblue; }
.to-top a{
color: white;
}
</style>
</head>
<body onscroll="Func()">
<div id="d1" class="cont" style="height: 2000px;background-color: darkgrey">
<h1>欢迎您访问我的网页！</h1>
</div>
<div id="d2" class="to-top hide">
<a href="javascript:void(0);" onclick="ToTop();">返回顶部</a>
</div> <script>
function Func() {
var sl = document.body.scrollTop;
var ii = document.getElementById('d2');
if(sl > ){
ii.classList.remove('hide');
}else{
ii.classList.add('hide');
}
} function ToTop(){
document.body.scrollTop = ;
}
</script>
</body>
</html>
3.8、其他操作
console.log 输出框
alert 弹出框
confirm 确认框 // URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载 // 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
说下定时器，定时器比较有用，比如当我们删除一个邮件的时候，会发现弹出一段对话，邮件已删除，这个是单次定时器，多次定时器在自己特定需求的时候，可以用到
// 多次定时器案例
<input type="button" value="Interval" onclick="Interval();">
<input type="button" value="StopInterval" onclick="StopInterval();">
<script>
function Interval() {
s1 = setInterval(function () {
console.log() //持续输出123
},);
s1 = setInterval(function () {
console.log()
},);
}
function StopInterval() {
clearInterval(s1); //清除一个多次定时器
}
</script>
单次定时器
<div>
<input type="button" value="删除" onclick="Delete();">
<input type="button" value="保留当前状态" onclick="UnDelete();">
<div id = "status"></div>
</div>
<script>
function Delete() {
document.getElementById("status").innerText = "已删除";
t1 = setTimeout(Clearstatus,);
}
function Clearstatus() {
document.getElementById("status").innerText = "";
}
function UnDelete() {
clearTimeout(t1); //清除完定时器，他会一直显示
}
</script>
四、事件处理
属性 |
此事件什么时候发生(什么时候被触发) |
| onabort | 图象的加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 区域的内容被修改 |
| onclick | 当用户点击某个对象时调用的事件句柄（比点击input标签时执行上面的代码例子） |
| ondblclick | 当用户双击某个对象时调用的事件句柄 |
| onerror | 在加载文档或图像时发生错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘被松开 |
| onload | 一张页面或一副图片完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标移动过来后 |
| onmouseout | 鼠标从某个元素移开 |
| onmouseover | 鼠标移动到某个元素之上 |
| onmouseup | 鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被重新调整大小 |
| onselect | 文本被选中 |
| onsubmit | 确认按钮被点击 |
| onunload | 用户退出页面 |
事件实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> // 普通事件
<button id = "btn1" onclick="func();">按钮</button>
<script>
var btn = document.getElementById("btn1");
function func() {
alert("普通时间处理")
}
</script> // 0级处理事件
<button id = "btn2">0级处理按钮</button>
<script>
var btn = document.getElementById("btn2");
btn.onclick = function () {
alert("0级处理按钮")
};
// btn.onclick = null; // 清除事件处理, 多个事件会被覆盖掉，只剩下最后一个事件
</script> // 2级处理事件
<button id = "btn3">2级处理按钮</button>
<script>
var btn = document.getElementById("btn3").addEventListener("click",function () {
alert("二级处理事件1")
});
var btn1= document.getElementById("btn3").addEventListener("click",function () {
alert("二级处理事件2")
});
//不会被覆盖
</script> <button id = "btn4">完整兼容按钮</button>
<script>
var btn = document.getElementById("btn4");
if (btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else {
btn.onclick = demo;
}
function demo() {
alert("整合兼容事件处理")
}
</script>
</body>
</html>
html--JavaScript之DOM (文档对象模型)的更多相关文章
- javascript之DOM文档对象模型编程的引入
/* DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的 对象进行描述,我们在浏览器上看 ...
- JavaScript（三、DOM文档对象模型）
一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: &q ...
- JavaScript笔记03——文档对象模型（Document Object Model，简称DOM）：获取HTML元素、操作HTML元素
Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.[1] DOM实际上是以面向对象方式描述的文档模型.DOM定 ...
- DOM文档对象模型简介
DOM简介 DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...
- JavaScript学习(6)-文档对象模型基础
JavaScript学习6-文档对象模型基础 1.节点方法 节点对象方法(W3C DOM Level2) 方法 说明 appendChild(newChild) 添加子节点到当前节点的末端 clone ...
- dom文档对象模型图
- JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】
全部章节 >>>> 本章目录 4.1 文档对象模型简介及属性 4.1.1 文档对象模型概述 4.1.3 实践练习 4.2 document 对象查找 HTML 元素 4.2 ...
- 文档对象模型 DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- Javascript学习笔记2.1 Javascript与DOM简介
DOM(文档对象模型)简介 DOM(文档对象模型)针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构,它是中立于平台和语言的接口,允许程序和脚本 ...
随机推荐
- 作业帮：给定一个整数数组，找出其中两个数相加等于目标值（去重set）
题目描述 给定一个整数数组,找出其中两个数相加等于目标值 输入 [1,3,5,7,9,11] 10 输出 1,9 3,7 代码: import java.util.HashMap; import ja ...
- Comet OJ - Contest #13-C2
Comet OJ - Contest #13-C2 C2-佛御石之钵 -不碎的意志-」(困难版) 又是一道并查集.最近做过的并查集的题貌似蛮多的. 思路 首先考虑,每次处理矩形只考虑从0变成1的点.这 ...
- 关于App收集个人信息基本规范，这里公开征求你的意见！
关于App收集个人信息基本规范,这里公开征求你的意见! https://www.thepaper.cn/newsDetail_forward_4122573 以后国家开始规范App收集个信息基本规范, ...
- Java中HashMap和TreeMap的区别
什么是Map集合在数组中我们是通过数组下标来对其内容索引的,而在Map中我们通过对象来对对象进行索引,用来索引的对象叫做key,其对应的对象叫做value.这就是我们平时说的键值对. HashMap ...
- 获取 Rancher 中 Prometheus 的数据
1.需求 在 rancher 应用商店添加集群监控,会安装 prometheus.grafana:需要从 prometheus 的 api 中收集 pod 的一些信息. 查看grafana 配置的数据 ...
- c语言课本及pta作业中运用到的程序思维
c语言课本运用到的程序思维 我个人觉得在写程序的时候,有很多题目会用到我们学过的解决一个程序或者一个问题的方法,把这些方法运用起来,将会使自己更加灵活地解决诸多问题,为今后打下良好地基础. (因为还没 ...
- PostgreSQL事务特性之嵌套事务
嵌套事务的实现是基于SAVEPOINT.ROLLBACK TO SAVEPOINT和RELEASE SAVEPOINT的,也就是设置一个保存点,可以回滚到保存点和释放保存点. 测试表的初始状态如下: ...
- 阿里OSS前端直传
第一次写博客,如有错误请多多指教. 先上代码吧: ossUpload = function (file, fun, funParameter) { //第一此请求后台服务器获取认证请求 $.ajax( ...
- validateField方法对部分表单字段进行校验
原文:https://blog.csdn.net/qq_37782076/article/details/85123602 代码 <template> <div class=&quo ...
- Golang中,Aes加解密
今天在用Golang解析php那边用Aes加密的一个key.网上大多是用base64将结果编码一下.而且用到了向量.我php 那边没有用到向量.所以golang这边也是要去掉的.参考网站的改了下.能够 ...