文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
document.getElementById('i1') /根据ID获取一个标签
document.getElementsByName('div') /根据name属性获取标签集合
document.getElementsByClassName('c1') /根据class属性获取标签集合
document.getElementsByTagName() /根据标签名获取标签集合
2、间接查找
parentElement() /父节点标签元素
children() /所有子标签
firstElementChild() /第一个子标签元素
lastElementChild() /最后一个子标签元素
nextElementtSibling() /下一个兄弟标签元素
previousElementSibling() /上一个兄弟标签元素
二、操作
1、内容
tag.innerText //仅获取标签中的文本内容
tag.innerText = 'ada' //对标签的文本内容重新赋值
tag.innerHtml //全部获取
tag.value //值
input标签 可通过value获取当前标签中的值
select标签 获取选中的value值(selectedIndex)
textarea 可通过value获取当前标签中的值
2、属性
obj.setAttribute('key','value') //添加属性('属性名称','属性值')
obj.removeAttribute('lishang') //删除属性
obj.attributes //列出所有属性
例子:
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" />
obj = document.getElementById('i1')
--->>>
obj: --->>>
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" >
obj.setAttribute('lishang','xiaomeng')
obj: --->>>
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" lishang="xiaomeng">
obj.removeAttribute('lishang')
obj.attributes --->>>
NamedNodeMap {0: id, 1: onfocus, 2: onblur, 3: type, 4: value, id: id, onfocus: onfocus, onblur: onblur, type: type, value: value, …}
3、class操作
className // 获取所有类名
classList.remove(cls) // 删除指定指定样式
classList.add(cls) // 添加指定样式
checkbox.checked // 能获取值也能够赋值
上面是针对class整个样式做修改和获取,下面是修改其中单个属性
如:
<style>
.c1{
font-size: 16px;
color: red;
...
}
</style>
<div class='c1 c2' style='font-size: 16px;'></div>
obj.style.fontSize = '16px';
obj.style.color = 'pink';
4、标签操作
4.1、创建标签,并添加到Html页面中去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="Addele1();" value="+"/>
<input type="button" onclick="Addele2();" value="+"/>
<div id = 'i1'>
<p><input type="text" /></p>
</div>
<script>
//添加方式一,通过字符串的方式
function Addele1() {
var tag = "<p><input type='text'/></p>"
//注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
//添加方式二,通过对象的方式
function Addele2() {
var tag = document.createElement('input');
tag.setAttribute('type','text')
tag.style.fontSize = '16px'
tag.style.color = 'red'
var p = document.createElement('p');
p.appendChild(tag)
document.getElementById('i1').appendChild(tag);
</script>
</body>
</html>
5、提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="http://www.oldboyedu.com">
<input type="text">
//提交方式 1
<input type="submit" value="提交">
//提交方式 2
<a onclick="submit();">提交</a>
</form>
<script>
function submit() {
document.getElementById('f1').submit()
}
</script>
</body>
</html>
6、其他
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "baidu.com" 重定向
location.reload() 重新加载
// 定时器
var oa = setInterval(function(){};5000}); 多次定时器,每5秒执行一次
clearInterval(oa) 清除多次定时器
var tb= setTimeout(function(){};5000}); 单次定时器,5秒之后执行一次
clearTimeout(tb) 清除单次定时器
三、事件
一个表格鼠标移上去的时候高亮显示
1、dom0 初级写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</