JS基础之DOM(自用)

1、节点的属性(nodeName、nodeType、nodeValue):

文档节点:

  • nodeType = 9
  • nodeValue = null
  • nodeName= #document

元素节点:

  • nodeType = 1
  • nodeValue = null
  • nodeName= 标签名

属性节点:

  • nodeType = 2
  • nodeValue = 属性值
  • nodeName= 属性名

文本节点:

  • nodeType = 3
  • nodeValue = 文本内容
  • nodeName= #text

2、Dom的获取:

① 获取body标签:document.getElementsByTagName("body")[0]document.body

② 获取html根标签:document.documentElement

③ 获取页面中所有的元素:document.alldocument.getElementsByTagName("*")

④ 获取标签元素的属性:元素.属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
		// window.onload = function () {
		// 	let btnDom = document.getElementsByClassName('btn')[0]
		// 	btnDom.onclick = function() {
		// 		alert('点击按钮')
		// 	}
		// }
	</script>
</head>
<body>
    <div id="app">
        <button class="btn">我是一个按钮</button>
        <input type="text" value="请输入" class="input0"/>
    </div>
    <script>
        /**
         * 获取标签元素的属性
         *      -- 元素.属性
         *      -- 获取class的样式的名称:元素.className
        */
        let inputDom = document.getElementsByClassName("input0")[0]
        console.log('inputDom',inputDom.value) // 打印:请输入
    </script>
</body>
</html>

⑤ 获取当前元素下面的所有子节点(IE8以上包含换行和空格):元素.childNodes

⑥ 获取当前元素下面的所有子元素(不包含空格):元素.children

⑦ 获取当前元素下面的第一个子节点(IE8以上包含换行和空格):元素.firstChild

⑧ 获取当前元素下面的第一个子元素(不包含空格,适用IE8以上):元素.firstElementChild

⑨ 获取当前元素的父节点:元素.parentNode

⑩ 获取当前元素的前兄弟节点(可能或获取到空白):元素.previousSibling

⑪ 获取当前元素的前一个兄弟元素(不会获取到空白) :元素.previousElementSibling

⑫ 获取当前元素的后一个兄弟节点(可能或获取到空白):元素.nextSibling

3、Dom的增删改:

① 新建元素节点:document.createElement("标签名")

② 向父节点中添加子节点:父节点.appendChild(子节点)

③ 在指定的子节点前面插入新的子节点:父节点.insertBefore(newChild, oldChild)

④ 指定子节点替换已有的子节点:父节点.replaceChild(newChild, oldChild)

⑤ 删除子节点:

  • 1、父节点.removeChild(要删除的子节点)

  • 2、子节点.parentNode.removeChild(要删除的子节点)

⑥ 新增文本节点 : document.createTextNode("文本")




    
    
    
    Document


    
第1个div
第2个div
  • 1、哈哈哈
  • 2、嘻嘻嘻

4、元素的样式:

① 获取行内样式:元素.style.样式名称

② 获取当前正在显示的样式(只能读,不能修改,想要修改要使用style):

  • 1、 只有ie支持:元素.currentStyle.样式名称

  • 2、其他浏览器:使用windows对象上的 getComputedStyle() 方法,此方法接收两个参数:

    • 参数一:需要获取样式的元素

    • 参数二:传递一个伪元素,一般传null

    • 返回值:key是样式名,值是样式名的对象

③ 获取元素可见区的宽度和高度(不带px):

  • 1、 clientWidth - 包含width+padding

  • 2、clientHeight - 包含width+padding

④ 获取元素整个的宽度和高度(不带px):

  • 1、 offsetWidth - 包含width+padding+border

  • 2、 offsetHeight - 包含width+padding+border

⑤ 获取当前元素的定位父元素(获取到离当前元素最近的祖先定位,如果没有开启定位的祖先元素,则返回body):

  • offsetParent - 包含width+padding+border

⑥ 获取当前元素相对于其定位父元素的水平偏移量:offsetLeft

⑦ 获取当前元素相对于其定位父元素的垂直偏移量:offsetTop

⑧ 获取滚动区域的宽度:scrollWidth

⑨ 获取滚动区域的高度:scrollHeight

⑩ 获取水平滚动条滚动的距离:scrollLeft

⑪ 获取垂直滚动条滚动的距离:scrollTop

当满足 scrollHeight - scrollTop == clientHeight ,说明垂直滚动条滚动到底

当满足 scrollWidth - scrollLeft == clientWidth, 说明水平滚动条滚动到底

onscroll事件:会在滚动条滚动的时候触发




    
    
    
    Document
    


    

你可能感兴趣的:(JS,javascript,前端,html)