js基础之DOM

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()

最后结果：