webApi

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】