webApi
获取元素
- 获取body
document.body
- 根据id获取元素
document.getElementById('id名')
- 根据标签名获取元素
document.getElementsByTagName('标签名')
- 根据选择器获取元素
// 根据选择器获取单个元素
document.querySelector('选择器');
// 根据选择器获取一组元素
document.querySelectorAll('选择器');
document.getElementsByClassName();
// 例子
// 缩小范围
var lis = document.querySelectorAll('#box .d1 li');
console.log(lis);
- 类名操作
document.getElementsByClassName();
事件
事件类型
- onclick 单击
- ondblclick 双击
- mouseover/mouseout: 这个是鼠标移入/移除的
- onblur:获得焦点
- onfocus:失去焦点
- mouseenter/leave 这个是鼠标进入/离开
mouseover:支持事件冒泡
mouseenter:不支持事件冒泡
键盘事件:
注意:一般情况给document绑定键盘事件。
-
onkeydown 键盘按下事件
-
onkeyup 键盘弹起事件
onmousedown,onmouseup
常见的属性操作
- href
- title
- id
- src
- className
- innerText
- innerHTML
表单属性操作
- value 用于大部分表单元素的内容获取
- type 可以获取input标签的类型
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
都是 true 和 false
自定义属性
一
某些时候我们需要自定义一些属性方便我们操作
<input type="button" value="点击" data-index="0">
- 元素.getAttribute() 获取属性
- 元素.setAttribute() 设置属性
- 元素.removeAttribute() 移除属性
// 自定义属性,非标准属性,自己添加的属性
var img = document.querySelector('img');
// console.log( img.src );
// console.log( img.bigSrc );
// img.index = 0;
// console.log( img.index );
// console.dir(img);
标签自定义属性:不可以用【元素.属性】的方式去访问或者去设置
// console.log( img.getAttribute('src') );
// img.setAttribute('src', 'c.jpg');
img.removeAttribute('src');
样式属性操作
修改元素的样式,有两种办法,1、行内样式,2、修改类名
- style属性:
语法:元素.style.样式属性 = 值;
var box = document.getElementById('box');
box.style.backgroundColor = 'pink';
- className类名
先把类名定义好,我们直接修改元素的类名,达到修改样式的效果
var box = document.getElementById('box');
box.className = 'demo';
如果有很多类的话,以上样式会覆盖
- classList 属性
添加类,删除类,切换类。
添加:元素.classList.add("类名称")
删除:元素.classList.remove("类名称")
切换:元素.classList.toggle("类名称")
注意: className直接操作可能覆盖原先的类名,所有我们如果怕覆盖就用classList
节点
节点层级
-
父节点:元素.parentNode 返回父元素节点
-
子节点:children 返回子元素节点
【cihldNodes】返回的是所有的子节点 包括文本节点(换行)
-
第一个元素子节点:firstElementChild
-
最后一个子节点:lastElementChild
-
下一个兄弟节点:nextElementSibling 只会获取下一个元素节点
-
上一个兄弟节点:previousElementSibling
注意:返回值为 伪数组
节点属性
- nodeType 节点类型 节点的nodeType属性的作用:元素→ 1; 文本→3
- nodeName 节点名称 节点名称- 节点的nodeName属性的作用:元素→ 大写的标签名 文本→ #text
- nodeValue 节点值 节点值- 节点的nodeValue属性的作用:元素→ null 文本→ 文本的内容
创建元素
有些时候我们需要再给页面中动态的添加一些元素,此时我们需要创建元素
innerHTML // 创建页面元素
createElement() // 创建页面元素
了解:document.write
innerHTML
元素.innerHTML = ‘内容’;
<button>创建li</button>
<ul>
<li>我是li</li>
</ul>
<script>
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
// 获取ul中原有的内容
var str = ul.innerHTML;
// 设置ul的内容
ul.innerHTML =str + '<li>我是新来的</li>';
};
</script>
createElement
document.createElement(‘标签名’); 返回一个新的元素对象
<button>创建li</button>
<ul>
<li>我是li</li>
</ul>
<script>
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
// 创建一个新的li元素
var newLi = document.createElement('li');
// 追加到ul中
ul.appendChild(newLi');
// 设置元素的内容
newLi.innerText = '我是新来的';
};
</script>
注意:innerHTML在追加多个元素时执行速度慢,性能差。不推荐使用createElement方法执行速度快,**性能高** ,在实际开发中**推荐使用** 。
追加元素方法
父元素.appendChild(子元素);
<button>创建li</button>
<ul>
<li>我是li</li>
</ul>
<script>
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
// 创建一个新的li元素
var newLi = document.createElement('li');
// 追加到ul中
ul.appendChild(newLi);
// 设置元素的内容
newLi.innerText = '我是新来的';
};
</script>
删除元素方法
父元素.removeChild(子元素)
其它
- 父节点.insertBefore(新的节点,旧的子节点)
插入元素
- 父节点.replaceChild(新的节点,旧的子节点)
替换元素
- 元素.cloneNode(true或false);
返回一份新的克隆后的 克隆元素
事件对象
键盘键盘事件对象
键盘事件对象相关属性-键盘按下哪个键
- 事件对象.keyCode 获取键盘按键对应的键码值
- 事件对象.altKey 表示alt键是否按下,返回布尔值。
- 事件对象.shiftKey 表示shift键是否按下,返回布尔值。
- 事件对象.ctrlKey 表示ctrl键是否按下,返回布尔值。(true按下,false没有按下)
事件委托的原理
- 关键:事件对象.target; 可以获取最先触发的元素
- 原理:因为事件冒泡的存在,我们才可以获取到最先触发的元素。【目标→ document】