文章目录

• DOM
• • 获取DOM元素
  • • • 获取元素节点
      • 层次结构获取节点
  • 操作DOM元素
  • • 内容
    • 样式
    • • 行间样式
      • 类样式(非行间样式)
    • 操作属性
  • DOM节点

DOM

获取DOM元素

获取元素节点

	getElement系列
	querySelector系列

层次结构获取节点

childNodes		->children
parentNode	 	->parentElement
nextSibling		->nextElementSibling
previousSibling	->previousElementSibling

操作DOM元素

内容

普通内容
	innerHTML
	innerText
表单内容
	value

样式

行间样式

设置: 	ele.style.样式名 =  ''
获取： 	ele.style.样式名

类样式(非行间样式)

设置:	ele.className = '类名' 		->覆盖上一个样式
		ele.classList.add('类名')	->添加多个样式
	
获取:	window.getComputerStyle(ele).样式名

操作属性

getAttribute('名')
setAttribute('名','值')
removeAttribute('名')

DOM节点

        节点分类
            标签元素：元素节点
            标签内容：文本节点
            标签属性：属性节点
            整个html称为文档节点
        
        节点树形结构
        	元素节点之间有空白文本节点
        节点层次关系
            父节点
            子节点
            兄弟节点
            
        层次结构获取节点
                文本节点    #text
                childNodes  所有子节点
                parentNode  父节点
                nextSibling 下一个兄弟节点
                previousSibling 上一个兄弟节点
                
                previousElementSibling
                nextElementSibling
                parentElement

		动态操作节点
				创建节点
					document.createElement()
				删除节点
					父节点.removeChild(子节点)
					子节点.remove()
				克隆节点
		            节点.cloneNode(true/false)
		                false 默认 不克隆
		                true         克隆
		        替换节点
		            父节点.replaceChild(新节点，原节点)    
			    判断节点类型
			             nodeType     nodeName    nodeValue         
			    元素节点    1       标签名大写      null
			    属性节点    2           属性名     属性值
			    文本节点    3           #text     文本内容
			
			    获取元素尺寸（宽高）三种方式
			    内容宽                  window.getComputedStyle(元素).width
			    内容宽+padding          元素.clienWidth
			    内容宽+padding+border   元素.offsetWidth