JavaScript基础总结 (4)

页面滚动的距离:document.documentElement.scrollTop||document.body.scrollTop;

节点的创建添加删除克隆 创建元素节点 document.createElement(\'tagName\') 添加子节点 parentElement.appendChild(node); //追加子节点 parentElement.insertBefore(newNode,oldNode); //在前面插入子节点 删除子节点 parentElement.removeChild(node) 替换子节点 parentElement.replaceChild(newNode,oldNode); 克隆节点 cloneNode() //参数是布尔值,默认为false,true为深拷贝 document对象 属性: document.documentElement 快速获取HTML节点只读 document.body 快速获取 body 元素 只读 document.head 快速获取 head 元素 只读 document.all 获取所有的元素组成的集合 只读 document.referrer 获取历史记录中上一个页眉 只读 document.lastModified 获取页面最后一次修改时间 只读 document.title 页面标题 可读可写 方法: document.write() documentFragment对象 特点 1.documentFragment对象也是一种节点,nodeType值是11 2.不会作为DOM结构一部分,不会再页面中渲染 3.通常用来作为元素的临时容器 创建 document.createDocumentFragment() 应用场景 优化,同时添加多个元素;可以先把元素添加到df中,最后一步作为子节点添加到页面中 实现一组顺序反转 HTML DOM 表单相关元素 ①form元素 方法: submit(); 调用该方法可以让表单提交 reset(); 调用该方法可以让表单重置 document.forms //获取表单集合 document.myForm //获取name是myform的表单 document.myForm.username //获取name属性为myForm的表单中的name属性为username的表单元素 document.myForm.elements //获取name属性是myForm的表单中的控件集合 ②文本输入框和文本域(input和textarea) 方法: focus() 调用该方法可以获取焦点 blur() 调用该方法可以失去焦点 select() 调用该方法可以选中里面的文字 ③select元素 属性 options 所有option的集合 selectedIndex 当前选中的选项的索引 方法: add(option,index) 添加选项,参数是要添加的option对象和位置 remove() 删除选项,指定要删除选项的索引 blur() focus() 创建option元素: new Option(\'中间的文本内容\',\'value值\') 表格相关属性 ①table元素 属性: rows 返回所有行元素的集合 cells 返回所有单元格的集合 方法: insertRow() 想表格中添加一行,指定新的索引,返回新添加的元素 deleteRow() 从表格中删除一行,指定索引; ②tableRow元素(tr元素) 属性: cells 返回该行中所有的单元格元素的集合 rowIndex 返回该行的索引 方法: insertCell() 向当前行插入单元格,需要指定索引,返回新的单元格 deleteCell() 删除一个单元格,需要指定索引 ③tableCell元素(td或th) 属性: cellIndex 返回单元格在行内的索引 事件绑定 事件绑定方式 ① 第一种方式 把事件作为标签属性 <button></button> ② 第二种方式 把事件作为元素对象的方法 //获取元素对象 btn.onclick=function(){ } ③第三种方式 事件监听方式 btn.addEventListener(\'click\',function(){});

优点:可以给同一个元素添加多个相同的事件

解除事件的绑定 ①第一种和第二种方式绑定的解除 //重新给元素绑定覆盖前面的; btn.onclick={} ②第三种方式 事件监听解除 btn.removeEventListener(\'click\',函数名);

想要解除绑定事件就不能绑定匿名函数

事件流

事件触发过程有三个阶段:捕获阶段、目标阶段(说两个阶段的时候省略此阶段)、冒泡阶段。

事件默认在冒泡阶段触发,addEventListener第三个参数设置为true,事件会在捕获阶段触发。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwwxd.html