DOM & Event in JavaScript

2020-07-01

DOM操作

getElement… 与querySelector的区别

使用getElement…返回的都是动态的集合
使用querySelectorAll返回的是静态集合

获取属性特征

使用特征操作时属性名称不区分大小写
特征值都为字符串类型，如需数值类型需要进行转换

Method	Des
getAttribute	获取属性
setAttribute	设置属性
removeAttribute	删除属性
hasAttribute	属性检测

Note: 大部分情况下可以通过属性该更改并可同步到特征集中。但是像input中的value属性需要通过特征方法如setAttribute更改可同步到特征集中。

<input type="text" name="login" value="secret" />
<script>
const login = document.querySelector(`[name='login']`)
login.value =  '12345';
console.log(login.getAttribute('value')) // 'secret'
//---------------------------------------------------

login.setAttribute('value', '12345')  
console.log(login.value) // '12345'
  

</script>

自定义属性

为避免属性重名，JS提供了dataset接口，为属性添加data-前缀

<body>
    <h1 data-color='red'>Hello world</h1>
</body>
<script>
		const h1 = document.querySelector('h1');
  	console.log(h1.dataset.color) // 'red'
</script>

创建节点

通过promise加载js/css文件：

function js(file) {
  return new Promise((resolve, reject) => {
    let js = document.createElement('script')
    js.type = 'text/javascript'
    js.src = file
    js.onload = resolve
    js.onerror = reject
    document.head.appendChild(js)
  })
};
function css(file) {
  return new Promise((resolve, reject) => {
    let css = document.createElement('link')
    css.rel = 'stylesheet'
    css.href = file
    css.onload = resolve
    css.onerror = reject
    document.head.appendChild(css)
  })
}

createDocumentFragment

使用createDocumentFragment可以创建虚拟的节点容器，不直接操作DOM性能更好

创建的节点的parentNode为null
使用createDocumentFragment创建的节点来暂存文档节点
createDocumentFragment创建的节点添加到其他节点上时，会将子节点一并添加

cloneNode&importNode

使用cloneNode和document.importNode用于复制节点对象操作

cloneNode: 节点方法,参数为true时递归复制子节点即深拷贝.

1 2	let container = document.querySelector('.container'); let newContainer = container.cloneNode(true);

importNode: 对象方法. 第一个参数为节点对象，第二个为true是递归复制. (部分ie浏览器不支持)

1 2	let container = document.querySelector('.container'); let newContainer = document.importNode(container,true);

节点内容

innerHTML

inneHTML用于向标签内添加html内容，同时触发浏览器的解析器重绘DOM。会保留原标签

outerHTML

而outerHTML取代原来标签和内容反映到页面上，但在JS中还是保留原来的内容

节点管理

Method	Des
append	节点尾部添加新节点或字符串
prepend	节点开始添加新节点或字符串
before	节点前面添加新节点或字符串
after	节点后面添加新节点或字符串
replaceWith	将节点替换为新节点或字符串

表单

表单查找

使用document.forms获取表单集合
使用form的name属性获取指定form元素
针对radio/checkbox获取的表单项是一个集合

<form action="" name="login">
  <input type="text" name="title" />
  <input type="text" name="password" value="secret" />
</form>
<script>
	console.log(document.forms.login.title)
  //  <input type="text" name="title" />
</script>

class的单独处理

Method	Des
node.classList.add	添加类名
node.classList.remove	删除类名
node.classList.toggle	切换类名（存删无添）
node.classList.contains	类名检测

widow.getComputedStyle

使用window.getComputedStyle可获取所有应用在元素上的样式属性

函数第一个参数为元素
第二个参数为伪类
这是计算后的样式属性，所以取得的单位和定义时的可能会有不同

事件

具体时间对象参考https://www.w3schools.com/jsref/dom_obj_event.asp

对象绑定

如果事件处理程序可以是对象，对象的 handleEvent 方法会做为事件处理程序执行。下面将元素的事件统一交由对象处理

<div>hello world</div>
<script>
  const div = document.querySelector('h1')
  class Obj {
    handleEvent(e) {
      this[e.type](e)
    }
    click() {
      console.log('click')
    }
    mouseover() {
      console.log('mouseover')
    }
  }
  div.addEventListener('click', new Obj())
  div.addEventListener('mouseover', new Obj())
</script>

执行事件处理程序时，会产生当前事件相关信息的对象，即为事件对事。系统会自动做为参数传递给事件处理程序。

event.currentTarget 指代的是绑定事件的元素对象

event.target指代的是事件响应的对象或者是其后代, 即得到事件目标元素即最底层的产生事件的对象

阻止默认事件行为可以使用event.preventDefault()

窗口事件

Event Type	Des
window.onload	文档解析及外部资源加载后
DOMContentLoaded	文档解析后不需要外部资源加载，只能使用addEventListener设置
window.beforeunload	文档刷新或关闭时
window.unload	文档卸载时
scroll	页面滚动时

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！