|
获取元素 document.getElementById('参数'); | 获取id元素 |
|---|
console.dir（time）； | 打印元素对象 |
|---|
document.getElementsByTagName('标签名'); | 用标签获取元素 |
|---|
var nav = document.getElementById('id名'); var nav1 = nav.getElementsByTagName('标签名'); | 可以得到元素里面的某些标签 |
|---|
document.getElementsByClassName（‘类名’）； | 根据类名返回元素对象集合 |
|---|
document.querySelector（‘选择器’） | 根据指定选择器返回第一个元素对象 |
|---|
document.querySelectorAll（‘选择器’） | 根据指定选择器返回全部 |
|---|
document.body | 返回body元素对象 |
|---|
document.documentElement | 返回html元素对象 |
|---|
事件基础 事件三要素 1.事件源 2.事件类型 3.事件处理程序
<button id="btn">事件</button>
<script>
// （1）事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
// （2）事件类型 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过
// （3） 事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
alert('被点击了');
}
</script>
鼠标事件 onclick | 鼠标点击左键触发 | onmouseover | 鼠标经过触发 | onmouseout | 鼠标离开触发 | onfocus | 获得鼠标焦点触发 | onblur | 失去鼠标焦点触发 | onmousemove | 鼠标移动触发 | onmouseup | 鼠标弹起触发 | onmousedown | 鼠标按下触发 |
操作元素 改变元素内容 element.innerText：不会保留空格跟换行 <button>按键</button>
<div>跟换</div>
<script>
var btn = document.querySelector('button'); var div = document.querySelector('div');
btn.onclick = function() {
div.innerText = '更换的内容';
} </script>
element.innerHtml：会保留空格跟换行内容 <p>
<strong>内容</strong> 文字 </p>
<script>
var ven = document.querySelector('p');
console.log(ven.innerText);
console.log(ven.innerHTML); </script>
修改元素属性 <button id="tp1">图片1</button>
<button id="tp2">图片2</button>
<img src="tup1" alt="" title="图片1">
<script>
var tp1 = document.getElementById('tp1'); var tp2 = document.getElementById('tp2'); var img = document.querySelector('img');
tp1.onclick = function() {
img.src = '图片地址';
img.title = '图片1';
}
tp2.onclick = function() {
img.src = '图片地址';
img.title = '图片2'
} </script>
不同时间修改不同内容 <img src="img/zao.jpg" alt="">
<div>上午好</div>
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date();
var h = date.getHours();
if (h < 12) {
img.src = 'img/zao.jpg';
div.innerHTML = '上午好好';
} else if (h < 18) {
img.src = 'img/zhong.jpg';
div.innerHTML = '中午好好';
} else {
img.src = 'img/wan.jpg';
div.innerHTML = '上午好好';
}
</script>
禁用按钮 disabled=true； <button>按钮</button>
<input type="text" value="文字">
<script>
var btn = document.querySelector('button'); var put = document.querySelector('input');
btn.onclick = function() {
put.value = '点击了'; // btn.disabled = true;
this.disabled=true;//this指向函数的调用者
} </script>
属性样式操作 行内样式操作：element.style <style>
div { width: 25px; height: 25px; background-color: red; }
</style></head><body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
div.style.backgroundColor = 'pink'; this.style.width = '200px';
} </script></body>
类名样式操作：element.className this.className = 'change';
排他思想 1.把所有元素清除样式 2.给其他元素设置样式 3.顺序不能颠倒
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
事件 onmouseover：鼠标经过 this.onmouseover=function（）{}
onmouseout：鼠标离开 this.onmouseout=function（）{}
获取元素 element.属性 <div id="dds">nsfas</div>
<script>
var div = document.getElementById('dds');
console.log(div.id);
</script>
element.getAttribute（’属性‘） <div id="dds">nsfas</div>
<script>
var div = document.getElementById('dds');
console.log(div.getAttribute('id'));
</script>
设置属性值 element.属性=‘值’ //设置内置属性值
element.setAttribute（‘属性’，‘值’）；
获取的id.removerAttribute（’属性‘） //移除属性
自定义属性规范 data-index=“1” //必须以data-开头
新增获取自定义属性方法 dataset.属性 console.log（div.dataset.index）；
dataset[‘index’] console.log（div.dataset[‘index’]）；
如果自定义属性里面有多个连接单词，我们采用驼峰命名 <div data-list-name="1"></div>
<script>
var div = document.querySelector('div');
console.log(div.dataset['listName']);
</script>
节点获取元素 父亲节点 node.parentNode
子节点 parentNode.childNodes（标准） var ul = document.querySelector('ul');
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeType == 1) {
console.log(ul.childNodes[i]);
}
}
parentNode.children（非标准）
parentNode.firstChild //获取元素第一个节点
parentNode.lastChild //获取元素左后一个节点
parentNode.firstElementChild //获取第一个子元素节点
parentNode.lastElementChild //获取最后一个子元素节点
console.log（ol.children[0]）； //获取第几个元素
兄弟节点 node.nextSibling //得到下一个兄弟节点
node.previousSibling //得到上一个兄弟节点
node.nextElementSibling //得到下一个兄弟元素节点
node.previousElementSibling //得到上一个兄弟元素节点
兼容性函数 function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
节点操作 创建节点 document.createElement（‘tagName’）
添加节点 node.appendChild（child） //后面追加元素
node.insertBefore（child，指定元素） //在前面追加元素 ul.insertBefore(li, ul.children[0]);
删除节点 node.removeChild（child） 从DOM中删除一个节点，返回删除的节点 ul.removeChild(ul.children[0]);
赋值节点 node.cloneNode（） 括号里为flase为复制标签，为true的话复制完全复制
阻止链接跳转 javascript：void（0）； javasccript：； 焦点 onfocus：获得焦点 <input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function() {
// console.log('得到焦点');
if (this.value === '手机') { this.value = '';
} this.style.color = '#333';
}
text.onblur = function() {
// console.log('失去焦点');
if (this.value === '') { this.value = '手机';
} this.style.color = '#999';
} </script>
onblur：失去焦点
|
