一、节点查找
1、父元素 => parentNode
2、子元素 => children // 是一个伪数组集合
3、firstElementChild 第一个孩子
4、lastElementChild 最后一个孩子
5、nextElementSibling=>下一个兄弟元素
6、previousElementSibling=>上一个兄弟元素
二、创建节点
1、document.createElement('标签名称')=> 返回的是一个新创建出来的标签 默认都是在内存里面存放这
说明:但凡是有创建节点, 必定就有添加节点
如果该标签是事件里面创建出来的, 无法在外部获取.
三、添加节点
1、 appendChild
语法:parent.appendChild(child)
parent: 调用者,父节点来调用
child:需要添加的那个孩子。
作用:把child添加到parent的孩子的最后面。
2、insertBefore
语法:parent.insertBefore(child, refChild);
parent:必须要父节点来调用
child:需要添加的那个节点
refChild:添加到哪一个节点的前面。
细节: 如果refChild找不到 则insertBefore会以appendChild形式追加
添加的那个节点还可以是页面上已经存在的 => 剪切
四、克隆节点
语法:let newNode = 目标节点.cloneNode(deep)
功能:在内存中克隆一份节点
参数:deep 布尔值
- false:默认值:是浅复制,只会复制标签,节点本身,不会复制节点的孩子。
- true: 深度复制,会复制标签,还会复制标签的所有内容 --- 常用
返回值: 返回一个一模一样的新节点 在内存中存在 如果需要显示在页面上,就需要配合添加节点操作
克隆出来的新节点和原模板节点没有任何关系
五、事件对象
document.onclick = function (event) {
console.log(event);
};
六、键盘对象
1、 键盘按下
document.onkeydown = function (e) {
console.log('按下键盘');
};
在键盘按下的值落到表单之前触发咯,获取的是上一次表单的结果
2、 键盘抬起
document.onkeyup = function (e) {
console.log('键盘抬起');
console.log(e.keyCode);
if (e.keyCode === 13) {
console.log('你按下了回车键');
}
};
在键盘按下的值落到表单之后触发咯,获取的是这次表单的结果
七、补充
字符串.trim()=>去掉首尾空格
将字符串左右的空格去掉
返回值: 返回去掉首尾空格的新字符串