JavaScript总结(二) Dom

Posted on 2020-08-29 15:03  carly_ssj  阅读(174)  评论(0)    收藏  举报

Dom

Html Dom能够通过Js进行访问，在dom中所有的元素都被定义为对象.
方法和基本使用

增删改查

	//增
	document.createElement(element) //添加
	//删
	document.removeChild(element) //删除
	//改
	document.repalceChild(element) //替换
	//添加
	document.appendChild(element)
	//查
	//根据id 查找元素
	document.getElementById("id的名字")
	//根据class查找元素
	document.getElementsByClassName("class的名字")
	//根据标签查找元素
	document.getElementsByTagName("tag的名字")
    document.querySelector("")//可以查找任何格式 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 w3c
    document.quertSelectorAll("")//querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。 w3c
NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

js修改css样式

	//改变元素的innerHtml
	element.innerHtml=new Value
	//直接设置style的属性 
	element.style.width="100px"
	element.style.height="100px"
	//setAttribute
	element.setAttribute('height', 100);
	element.setAttribute('height', '100px');
	element.setAttribute("style","width:50px")
	element.setAttribute('style', 'height: 100px !important');
	//使用setProperty 
	element.style.setProperty('height', '300px', 'important');
	//cssText  通过js设置css属行 会不停的创建销毁 如果 css 多次设置 可以选择cssText 减少重排
	element.style.cssText = 'width: 100px';
	element.style.cssText += 'height: 100px !important';

重绘和重排

 重绘：是指元素的样式发生了变化，而大小和尺寸没有发生变化。
 重排：是指元素的位置或者大小发生了改变，浏览器需要重新去计算渲染树，新的渲染树建立之后，浏览器会重新绘制所影响的元素

更详细的可以去这个博主的介绍

DOM事件

常用的事件可以分为以下几种:

  1. 鼠标事件
    onmousemove 鼠标被移动。
    onmouseover 鼠标移到某元素之上。
    onmouseout 鼠标从某元素移开。
    onmouseup 鼠标按键被松开。
    onmousedown 鼠标按钮被按下。
    onmouseenter 当鼠标指针移动到元素上时触发。
    onmouseleave 当鼠标指针移出元素时触发
    onclick 当用户点击某个对象时调用的事件句柄。
    ondblclick 当用户双击某个对象时调用的事件句柄。
  2. 键盘事件
    onkeydown 键盘摁下
    onkeyup 键盘抬起
    onkeypress 键盘松开
  3. 表单事件
    onblur 元素失去焦点时触发
    onchange 该事件在表单元素的内容改变时触发( , ,