js基础之DOM
一、获取DOM节点
属性 | 描述 |
---|---|
getElementById() | 通过id来选中元素 |
getElementsByTagName() | 通过标签名来选中元素,获取到不止一个元素 |
getElementsByClassName() | 通过类名来获取元素 |
querySelector与querySelectorAll() | 分别表示满足条件的第一个元素或者所有元素。括号内的写法与CSS选择器的写法一样 |
getElementsByName() | 通过name属性来获取表单元素。一般也只用表单元素 |
document.title和document.body | 获取一个页面仅有的一个title和body元素 |
children属性 | 获得DOM元素的所有子元素,返回值是集合 |
parentNode属性 | 获得DOM元素的父级元素 |
<ul id="ul">
<li>1</li>
<li class="li2">1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ol>
<li>2</li>
<li class="li2">2</li>
<li>2</li>
<li>2</li>
</ol>
var ul = document.getElementById("ul")
var aLi = ul.children
// 获取到ul的五个li子元素数组
console.log(aLi)
// 获取到ul的父元素body
console.log(ul.parentNode)
console.log(document.querySelector("#ul"))
console.log(document.querySelector(".li2"))
console.log(document.querySelectorAll(".li2"))
console.log("-----------")
// 包含文本(换行)的节点
console.log(ul.childNodes)
二、DOM对象属性
DOM对象属性是节点的方法,所以前缀必须是节点。如:document.getElementById(ID值).getAttribute()
什么是元素属性呢?class就是元素属性,写在标签内的所有东西都是标签属性, 比如link
的href,
比如img
的src
等都是元素属性。元素自带的属性可以直接用.
语法获取,但是自定义属性需要 getAttribute()和 setAttribute( ) 方法 。
属性 | 描述 |
---|---|
getAttribute() | 获取元素的属性值 |
setAttribute() | 设置元素的属性 |
removeAttribute() | 删除属性 |
<img class="logo" src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png" alt="">
var img = document.querySelector("img")
console.log(img.src) // https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png
console.log(img.className) // logo
img.setAttribute("data-suibian", 123) // 值一定都是字符串
console.log(img.getAttribute("data-suibian")) // 123
三、操作DOM
属性 | 描述 |
---|---|
createElement() | 创建节点 |
cloneNode() | 克隆节点 |
appendChild() | 插入节点 |
replaceChild() | 替换节点 |
removeChild() | 移除节点 |
<div>
<p>pppppp</p>
<p id="title">pppppp</p>
</div>
var p = document.querySelector("#title")
p.onclick = function(){
alert(123)
}
var div = document.querySelector("div")
var h1 = document.createElement("h1")
h1.innerHTML = "eee"
div.appendChild(h1)
// 浅克隆
// 深克隆 true
var title1 = h1.cloneNode(true)
div.appendChild(title1)
var title2 = h1.cloneNode(true)
div.insertBefore(title2, p)
var title3 = h1.cloneNode(true)
div.replaceChild(title3, p)
div.removeChild(title2)
title3.parentNode.removeChild(title3)
title1.remove()
最后结果: