DOM
每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作
1. 节点类型
DOM节点共有12中类型，常用的只有3种
- 元素节点
- 属性节点
- 文本节点
<div id='wrapper'> 一个小测试 </div>
-
id=""wrapper"属性节点 -
一个小测试文本节点 -
<div id='wrapper'> 一个小测试 </div>元素节点
不同节点的nodeType属性值
| 节点类型 | nodeType值 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
- 一个元素就是一个节点，这个节点称为“元素节点”。
- 属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
- 只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。
2. 获取元素
在JavaScript中，我们可以通过以下6种方式来获取指定元素。
getElementById()
getElementsByTagName()
getElementsBuClassName()
querySelector()
quertSelectorAll()
getElementsByName()
document.title和document.body
2.1 getElementById()
document.getElementById('id_name')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementById('div1')
oDiv.style.color = 'red'
}
</script>
</head>
<body>
<div id='div1'>JavaScript</div>
</body>
</html>
2.2 getElementsByTagName()
document.getElementsByTagName('tagName')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementsByTagName('ul')
var oLi = oUl.getElementsByTagName('li')
oLi[2].style.color = 'red'
console.log(oUl)
}
</script>
</head>
<body>
<ul id='list'>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
2.3 getElementById()和getElementsByTagName()方法的区别
-
getElementById()不可以操作动态创建的DOM；getElementsByTageName()可以操作动态创建的DOM -
getElementById()获取的是1个元素，getElementsByTagName()获取的是多个元素（类数组） -
getElementById()前面只可以接document；getElementsByTageName()前面不仅可以接document，还可以接其他的DOM对象。
2.4 getElementsBuClassName()
-
getElementsByClassName()方法不能操作动态DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
第三种获取元素的方式
</title>
<script>
window.onload = function ()
{
var oLi = document.getElementsByClassName('select')
oLi[0].style.color = 'red'
}
</script>
</head>
<body>
<ul id='list'>
<li> HTML </li>
<li> CSS </li>
<li class='select'> JavaScript </li>
<li class='select'> JQuery </li>
<li class='select'> Vue.js </li>
</ul>
</body>
</html>
2.5 querySelector() 和querySelectorAll()
-
querySelector()选取满足选择条件的第一个元素 -
querySelectorAll()选取满足条件的所有元素 - 对于 id 选择器来说，由于页面只有一个元素，建议大家使用
getElementById()，不要用querySelector()或querySelectorAll()。因为getElementById()的效率更高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第4种方式 query</title>
<script>
window.onload = function ()
{
var oDiv = document.querySelectorAll('.test')
oDiv[1].style.color = 'red'
}
</script>
</head>
<body>
<div>JavaScript</div>
<div class='test'>JavaScript</div>
<div class='test'>JavaScript</div>
<div>JavaScript</div>
<div class='test'>JavaScript</div>
</body>
</html>
2.6 getElementByName()
getElementByName()只用于表单元素，一般只用于单选按钮和复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function ()
{
var oInput = document.getElementsByName('status')
oInput[2].checked = true
var oTable = document.getElementsByName('fruit')
oTable[1].checked = true
oTable[2].checked = true
}
</script>
</head>
<body>
<label><input type="radio" value='本科' name='status' /> 本科 </label>
<label><input type="radio" name="status" value="硕士" /> 硕士 </label>
<label><input type="radio" name="status" value="博士" /> 博士 </label>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>
<h2>你喜欢的水果是：</h2>
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="火龙果" />火龙果</label>
</body>
</html>
2.7 document.title和document.body
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function ()
{
document.title = '你的梦想是什么'
document.body.innerHTML = '<strong style="color:red"> 不断奋斗的目标 </storng>'
}
</script>
</head>
</html>
3. 创建元素
动态DOM：使用JavaScript创建的元素。这一元素一开始在HTML中不存在。
-
createElement()创建一个元素节点 -
createTextNode()创建一个文本节点 - 可以将元素节点和文本节点“组装”成我们平常开到的“有文本内容的元素”
var e1 = document.createElement('元素名')
var text = document.createTextNode('文本内容')
e1.appendChild(txt) // 把文本节点插入元素节点中
e2.appendChild(e1) // 把组装好的元素插入已存在的元素中
3.1 简单元素，不带属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementById('content')
var oStrong = document.createElement('strong')
var oText = document.createTextNode('一个测试')
oStrong.appendChild(oText)
oDiv.appendChild(oStrong)
}
</script>
</head>
<body>
<div id="content"></div>
<div id='content2'><strong>Hello world</strong></div>
</body>
</html>
3.2 复杂元素，带属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function ()
{
var mInput = document.createElement('input')
mInput.id = 'mytest'
mInput.type = 'button'
mInput.value = '点击测试'
document.body.appendChild(mInput)
}
</script>
</head>
<body>
<input id='mytest2' type='button' value='点击' />
</body>
</html>
4.插入元素
插入元素的两种方式：
-
appendChild()把一个新元素插入到父元素的内部子元素“末尾” -
insertBefore()将一个新元素插入到父元素中的某一个子元素“之前”
4.1 appendChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function ()
{
//获取按钮元素
var mBtn = document.getElementById('mbtn')
// 为按钮添加点击相应
mBtn.onclick = function ()
{
// 获取文本输入框元素
var mText = document.getElementById('txt')
// 生成一个新的文本元素，获取输入框的值
var mTextNode = document.createTextNode(mText.value)
// 生成一个新的 li 元素
var mLi = document.createElement('li')
mLi.appendChild(mTextNode)
// 获取ul元素
var mUl = document.getElementById('list')
mUl.appendChild(mLi)
// 清空输入框中的内容
// mText.textContent = ''
}
}
</script>
</head>
<body>
<ul id='list'>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<hr />
<input id='txt' type='text' />
<input id="mbtn" type="button" value="插入">
</body>
</html>
4.2 insertBefore()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
//获取 btn 元素
var mBtn = document.getElementById('btn')
// 为 btn 元素增加点击相应
mBtn.onclick = function ()
{
// 获取输入内容
var mText = document.getElementById('txt')
console.log(mText.value)
// 创建一个新的文本元素
var mContent = document.createTextNode(mText.value)
// 创建一个新的 li 元素
var mLi = document.createElement('li')
// 在 li 元素中增加内容
mLi.appendChild(mContent)
// 获取 ul 元素
var mUl = document.getElementById('list')
// 获取 ul 元素中的第一个 li 元素
// var mFirstLi = mUl.getElementsByTagName('li')[0]
// 在 ul 元素的最前面插入数据
// mUl.insertBefore(mLi, mFirstLi)
// 更好的方法
mUl.insertBefore(mLi, mUl.firstElementChild)
mText.value = ''
}
}
</script>
</head>
<body>
<ul id='list'>
<li>HTML</li>
<li>Java</li>
<li>Python</li>
</ul>
<input id='txt' type="text" />
<input id='btn' type="button" value='插入' />
</body>
</html>
5. 删除元素
使用removeChild()方法删除父元素下的某个子元素
var mBtn2 = document.getElementById('deleteBtn')
mBtn2.onclick = function ()
{
// 获取 ul 元素
var mUl = document.getElementById('list')
// 删除 最后一个 元素
mUl.removeChild(mUl.lastElementChild)
// 删除整个 ul 元素
document.body.removeChild(mUl)
}
6. 复制元素
使用cloneNode()方法来实现复制元素
mBtn.onclick = function ()
{
console.log("01")
// 获取 ul 元素
var mUl = document.getElementById('list')
var mUlNew = mUl.cloneNode(1)
// var mUlNew = mUl.cloneNode(0)
document.body.appendChild(mUlNew)
}
DOM进阶
1. HTML属性操作
在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”，另外一种是使用“对象方法”
obj.attr,obj是元素名，通过之前方法获取元素；attr是属性名，通过点运算符来获取它的属性。
在实际开发中，在更多的情况下，我们要获取的是表单元素的值。其中文本框、单选按钮、复选框、下拉列表中的值，都是通过value属性来获取的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>获取属性值</title>
<script>
window.onload = function ()
{
var mBtnText = document.getElementById("btnText")
var mBtnRadio = document.getElementById("btnRadio")
var mBtnCheck = document.getElementById("btnCheck")
function onclickText ()
{
// 获取文本框元素
var mText = document.getElementById('text')
window.alert(mText.value)
}
function onclickRadio ()
{
// 获取单选框元素
var mRadio = document.getElementsByName('fruit')
for (var i = 0; i < mRadio.length; i++)
{
if (mRadio[i].checked)
{
window.alert(mRadio[i].value)
}
}
}
function onclickCheck ()
{
var resAry = []
var mCheck = document.getElementsByName("mobile")
for (var i = 0; i < mCheck.length; i++)
{
if (mCheck[i].checked)
{
resAry.push(mCheck[i].value)
}
}
var resStr = resAry.join(' and ')
window.alert(resStr)
}
mBtnText.onclick = onclickText
mBtnRadio.onclick = onclickRadio
mBtnCheck.onclick = onclickCheck
}
</script>
</head>
<body>
<div>
<input id='text' type="text" />
<br />
<input id='btnText' type="button" value="获取文本框内容" />
<hr />
</div>
<div>
<label><input type="radio" name="fruit" value="苹果">苹果</label>
<label><input type="radio" name="fruit" value="梨">梨</label>
<label><input type="radio" name="fruit" value="西瓜">西瓜</label>
<br />
<input id='btnRadio' type="button" value="获取单选框内容" />
<hr />
</div>
<div>
<label><input type="checkbox" name="mobile" value="华为">华为</label>
<label><input type="checkbox" name="mobile" value="苹果">苹果</label>
<label><input type="checkbox" name="mobile" value="三星">三星</label>
<br />
<input id='btnCheck' type="button" value="获取多选框内容" />
</div>
</body>
</html>
HTML元素的属性值同样也是通过属性名来设置的
obj.attr = ' value 'setAttribute()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var mBtn = document.getElementById('btn')
var mImg = document.getElementById('pic')
var flag = 1
function onclickBtn ()
{
if (flag)
{
mImg.src = './resource/002.png'
flag = 0
}
else
{
mImg.setAttribute('src', "./resource/001.png")
flag = 1
}
}
mBtn.onclick = onclickBtn
}
</script>
</head>
<body>
<img id='pic' src="./resource/001.png">
<br />
<input id='btn' type="button" value="修改照片" />
</body>
</html>
通过“对象方法”来操作HTML属性
getAttribute()setAttribute()removeAttribute()hasAttribute()
对于自定义的属性（用户自定义的而不是元素自带的属性），此时我们不能使用“对象属性”的方式获取，只能用“对象方法”的方式获取。
removeAttribue()属性在更多情况下是结果class属性来整体控制元素样式的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.main{color:red;font-weight: bold;}
</style>
<script>
window.onload = function ()
{
var mP = document.getElementsByTagName('p')
var mBtnAdd = document.getElementById('btnAdd')
var mBtnRemove = document.getElementById('btnRemove')
mBtnAdd.onclick = function ()
{
mP[0].className = 'main'
}
mBtnRemove.onclick = function ()
{
mP[0].removeAttribute('class')
}
}
</script>
</head>
<body>
<p>你偷走了我的影子，无论你在哪里，我都会一致乡镇你</p>
<input id='btnAdd' type='button' value='添加样式' />
<input id='btnRemove' type="button" value="删除样式" />
</body>
</html>
2. CSS属性操作
- 获取CSS属性值
getComputedStyle(obj).attr-
obj元素名 -
attr: “驼峰”命名法明明的CSS属性名- CSS3中的
-webkit-box-shadow写成webkitBoxShadow
- CSS3中的
- 支持Google、Firefox和IE9及以上的浏览器，不支持IE6、IE7和IE8
- IE6、IE7和IE8以上使用
currentStyle
- IE6、IE7和IE8以上使用
<!DOCTYPE html>
<html lang="cn-ZH">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
<script>
window.onload = function ()
{
var mBtn = document.getElementById('btn')
var mBox = document.getElementById('box')
mBtn.onclick = function ()
{
window.alert(getComputedStyle(mBtn).backgroundColor)
}
}
</script>
</head>
<body>
<input id='btn' type="button" value="获取颜色" />
<div id='box'></div>
</body>
</html>
- 设置CSS属性值
- 使用
style对象来设置一个CSS属性的值。在元素的style属性中添加样式，这种方法设置的是“行内样式”。obj.style.attr = 'value'-
attr采用驼峰型命名法
- 在JavaScript中，我们可以使用
cssText属性来同时设置多个CSS属性，这也是在元素的style属性中添加的。- 不再使用“驼峰”命名法，使用CSS平常写法
- 使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: indigo;
}
</style>
<script>
window.onload = function ()
{
var btn = document.getElementById('btn')
var img = document.getElementById('box')
btn.onclick = function ()
{
var attName = document.getElementById('attrName').value
var attValue = document.getElementById('attrValue').value
if (!attName || !attValue )
{
console.log('基础功能')
img.style.backgroundColor = "hotpink"
}
else
{
console.log(attValue)
console.log(attName)
console.log('用户输入')
img.style[attName] = attValue
// 当用户输入时，获取的都是string类型，只能使用该方法，不能使用点运算符
}
}
}
</script>
</head>
<body>
<div id='box'></div>
属性名称：<input id="attrName" type="text" />
<br />
属性值：<input id="attrValue" type="text" />
<br />
<input id='btn' type="button" value="修改" />
</body>
</html>
3.DOM遍历
-
查找父元素
obj.parentNode<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> DOM遍历-获取父节点 </title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: 1px solid gray;} </style> <script> window.onload = function () { var mTd = document.getElementsByTagName("td") for (var i = 0; i < mTd.length; i++) { mTd[i].onclick = function () { // 获取当前td的父元素 var mParent = this.parentNode // 为当前td元素的父元素添加样式 mParent.style.color = 'white' mParent.style.backgroundColor = 'red' } } } </script> </head> <body> <table> <caption>考试成绩</caption> <tr> <td>小明</td> <td>80</td> <td>80</td> <td>80</td> </tr> <tr> <td>小红</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>小工</td> <td>98</td> <td>98</td> <td>98</td> </tr> </table> </body> </html>
-
查找子元素
-
chaildNodes,firstChild,lastChild-
childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的
-
-
children,firstElementChild,lastElementChild- children获取的是所有的元素节点，不包括文本节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <script> function testLength () { var mUl = document.getElementById('list') var childNodesLen = mUl.childNodes.length var childrenLen = mUl.children.length window.alert('chileNodes的长度为：' + childNodesLen + "children的长度为:" + childrenLen) // 说明 // childNodes的结果为7，包括3个子元素节点和4个子文本节点 // 每一个换行符都是一个空白节点，JavaScript会把这些空白节点当成文本节点来处理。 } function deleteItem () { var mUl = document.getElementById('list2') var mBtn = document.getElementById('btn') mBtn.onclick = function () { console.log('btn click') mUl.removeChild(mUl.lastChild) // 需要点击2次才能看到删除效果。 // 第一次点击删除的是“文本节点” // 第二次点击删除的是“vue.js”内容 } } function deleteItem2 () { var mUl = document.getElementById('list2') var mBtn = document.getElementById('btn2') mBtn.onclick = function () { console.log('btn click') mUl.removeChild(mUl.lastElementChild) // 跳过 空白文本节点 } } window.onload = function () { testLength() deleteItem() deleteItem2() } </script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <hr /> <ul id="list2"> <li>JQuery</li> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Vue.js</li> </ul> <br /> <input type="button" id="btn" value="ChildNodes删除" /> <input type="button" id='btn2' value="children删除" /> </body> </html>
-
-
查找兄弟元素
-
previousSibling前一个兄弟节点，nextSibling下一个兄弟节点- 包含文档节点（一般为空白节点）
-
previousElementSibling前一个兄弟节点，nextElementSibling下一个兄弟节点- 不包含文档节点
-
innerHTML和innerText
可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。
<script>
window.onload = function ()
{
var mImg = document.createElement('img')
mImg.className = 'pic'
mImg.src = 'resource/001.png'
mImg.style.border = '1px solid silver'
document.body.appendChild(mImg)
// 更简单的方法，使用innerHTML
/*
document.body.innerHTML意味着这是<body>中的全部内容
*/
document.body.innerHTML = '<img class="pic" src="resource/002.png" style="border: 1px solid silver" /> <br />'
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function ()
{
var mP = document.getElementById('content')
document.getElementById('txt1').value = mP.innerHTML
document.getElementById('txt2').value = mP.innerText
}
</script>
</head>
<body>
<p id="content"><strong style="color: hotpink;">这是一个测试</strong></p>
innerHTML中的内容是: <input id="txt1" type="text"> <br />
innerText中的内容是: <input id="txt2" type="text"> <br />
</body>
</html>
**innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。
