DOM全名文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过DOM可以改变网页的内容,结构和样式
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面的所有标签都是元素,DOM中用element表示
节点:网页中的所有内容都是节点,DOM用node表示
获取元素的方式
根据ID获取
根据标签名获取
通过H5新增方法获取
特殊元素获取
根据ID获取
<body>
<div id="num">2222222222</div>
<script>
var num = document.getElementById('num');
console.log(num);
console.log(typeof num);
// console.dir打印我们返回的元素对象,更好的查看里面的属性和方法
console.dir(num);
</script>
</body>
根据标签名获取
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
</script>
通过H5新增方法获取
document.getElementsByClassName(‘类名’);
document.querySelector(‘选择器’);
document.querySelectorAll(‘选择器’);
<div class="box">盒子</div>
<div class="box">盒子</div>
<div class="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs);
var fsbx = document.querySelector('.box');
console.log(fsbx);
var nav = document.querySelector('.nav');
console.log(nav);
var allbox = document.querySelectorAll('.box');
console.log(allbox);
</script>
// 获取body元素
var bo = document.body;
console.log(bo);
console.dir(bo);
// 获取html元素
var html = document.html;
console.log(html);
console.dir(html)
事件
<button>dianji</button>
<script>
// 获取元素
var btn = document.querySelector('button');
// 事件类型:点击
btn.onclick = function() {
// 触发的事件
alert('点击了');
}
</script>
常见的鼠标事件
onclick 鼠标点击左键
onmouseover 鼠标经过
onmouseout 鼠标离开
onfocus 鼠标焦点触发
onblur 失去鼠标焦点
onmousemove 鼠标移动
onmouseup 鼠标弹起
onmousedown 鼠标按下
改变元素内容
element.innerText
去除html标签、空格、换行
element.innerHtml
包括html标签、空格、换行
<div></div>
<p>
1111
</p>
<script>
var div = document.querySelector('div');
var p = document.querySelector('p');
// innerText不认识html标签
div.innerText = '<strong> 12344124 </strong>';
p.innerHTML = '<strong> 12344124 </strong>';
// 这两个属性可以读写
console.log(p.innerText);
console.log(p.innerHTML);
</script>
改变样式style
如果要改类名:element.className=’ 新类名 ';
但className会覆盖原来的类名
所以可以element.className='旧类名 新类名 ';
//改变样式style
<div>1</div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
如果是改变图片用src
btn.onclick = function() {
img.src = 'images/1.jpg';
}
表单里的value
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
input.value = '点击了';
btn.disabled = true;
}
</script>