var box = boxes[i];
console.log(box);
}
总结
掌握
getElementById()
getElementsByTagName()
了解
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
事件
事件:触发-响应机制
Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。
事件三要素
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
属性操作
非表单元素的属性
href、title、id、src、className
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本
我会生成为标签
';console.log(box.innerHTML);
box.innerText = '我是文本
我不会生成为标签
';console.log(box.innerText);
HTML转义符
" "
‘ '
& &
</less than 小于
> // greater than 大于
空格
© ©
表单元素属性
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性
自定义属性操作
getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。
样式操作
var box &#61; document.getElementById(&#39;box&#39;);
box.style.width &#61; &#39;100px&#39;;
box.style.height &#61; &#39;100px&#39;;
box.style.backgroundColor &#61; &#39;red&#39;;
类名操作
var box &#61; document.getElementById(&#39;box&#39;);
box.className &#61; &#39;clearfix&#39;;
创建元素的三种方式
document.write()
document.write(&#39;新设置的内容
标签也可以生成
&#39;);innerHTML
var box &#61; document.getElementById(&#39;box&#39;);
box.innerHTML &#61; &#39;新内容
新标签
&#39;;document.createElement()
var div &#61; document.createElement(&#39;div&#39;);
document.body.appendChild(div);
性能问题
innerHTML方法由于会对字符串进行解析&#xff0c;需要避免在循环内多次使用。
可以借助字符串或数组的方式进行替换&#xff0c;再设置给innerHTML
优化后与document.createElement性能相近
节点操作
var body &#61; document.body;
var div &#61; document.createElement(&#39;div&#39;);
body.appendChild(div);
var firstEle &#61; body.children[0];
body.insertBefore(div,firstEle);
body.removeChild(firstEle);
var text &#61; document.createElement(&#39;p&#39;);
body.replaceChild(text, div);
节点层级
重点讲父子属性&#xff0c;兄弟属性画图讲解
var box &#61; document.getElementById(&#39;box&#39;);
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);
注意
childNodes和children的区别&#xff0c;childNodes获取的是子节点&#xff0c;children获取的是子元素
nextSibling和previousSibling获取的是节点&#xff0c;获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题&#xff0c;IE9以后才支持
总结
节点操作&#xff0c;方法
appendChild()
insertBefore()
removeChild()
replaceChild()
节点层次&#xff0c;属性
parentNode
childNodes
children
nextSibling/previousSibling
firstChild/lastChild
事件详解
注册/移除事件的三种方式
var box &#61; document.getElementById(&#39;box&#39;);
box.onclick &#61; function () {
console.log(&#39;点击后执行&#39;);
};
box.onclick &#61; null;
box.addEventListener(&#39;click&#39;, eventCode, false);
box.removeEventListener(&#39;click&#39;, eventCode, false);
box.attachEvent(&#39;onclick&#39;, eventCode);
box.detachEvent(&#39;onclick&#39;, eventCode);
function eventCode() {
console.log(&#39;点击后执行&#39;);
}
事件的三个阶段
捕获阶段
当前目标阶段
冒泡阶段
事件对象.eventPhase属性可以查看事件触发时所处的阶段
事件对象的属性和方法
event.type 获取事件类型
clientX/clientY 所有浏览器都支持&#xff0c;窗口位置
pageX/pageY IE8以前不支持&#xff0c;页面位置
event.target || event.srcElement 用于获取触发事件的元素
event.preventDefault() 取消默认行为
阻止事件传播的方式
标准方式 event.stopPropagation();
IE低版本 event.cancelBubble &#61; true; 标准中已废弃
常用的鼠标和键盘事件
onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发
![]()