·#DOM
什么是DOM：文檔對(duì)象模型，一份html文件在js中就是一個(gè)DOM對(duì)象（document對(duì)象）
BOM是包含DOM的
節(jié)點(diǎn)的概念：組成一份DOM文檔的所有內(nèi)容都是DOM的節(jié)點(diǎn)，包括但不僅限于：標(biāo)簽、空格、換行、注釋、標(biāo)簽的屬性、標(biāo)簽中嵌套的文本
節(jié)點(diǎn)屬性的概念：用來(lái)描述節(jié)點(diǎn)特征的變量：nodeName\nodeType\nodeValue,這三種屬性可以用來(lái)判斷節(jié)點(diǎn)的類型
document中的節(jié)點(diǎn)特征
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 當(dāng)頁(yè)面渲染完畢時(shí)，執(zhí)行的事件函數(shù)
window.onload = function () {
// 獲取已經(jīng)渲染的節(jié)點(diǎn)
// childNodes方法只能獲取到當(dāng)前節(jié)點(diǎn)下的一級(jí)子節(jié)點(diǎn)，嵌套的二級(jí)節(jié)點(diǎn)無(wú)法獲取
// var nodes = document.childNodes;
// console.log(nodes);
// 獲取到body標(biāo)簽的所有子節(jié)點(diǎn)
var nodes = document.body.childNodes;
var body = document.querySelector('#demo')
var nodes = body.childNodes;
console.log(nodes);
document.title = '百度一下'
}
</script>
</head>
<body id="demo">
<!--我是注釋內(nèi)容-->
<!--我是注釋2-->
<p id='p1' class="p">一只烏鴉口渴了</p>
到處找水喝
</body></html>
document中的節(jié)點(diǎn)操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var p = document.querySelector('#p')
console.log(p.nextSibling);
//p.previousSibling
}
</script>
</head>
<body>
<p id='p'>一只烏鴉口渴了</p>
<span>呵呵呵呵呵呵</span>
</body>
<p>vnosvn</p>
</html>
文檔寫(xiě)入操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 在頁(yè)面正在渲染時(shí)，使用write方法向頁(yè)面中寫(xiě)入數(shù)據(jù)，并不會(huì)影響已渲染出來(lái)的數(shù)據(jù)
// 當(dāng)頁(yè)面渲染完畢時(shí)，使用write方法向頁(yè)面中寫(xiě)入數(shù)據(jù)，js會(huì)認(rèn)為已渲染的數(shù)據(jù)作廢，用write方法中的參數(shù)覆蓋已渲染的數(shù)據(jù)
window.onload = function () {
document.write('hello world');
document.write('<h1>呵呵</h1>');
document.writeln('<h1>哈哈</h1>');
// 需要向哪個(gè)標(biāo)簽中寫(xiě)入數(shù)據(jù)，就是用該標(biāo)簽調(diào)用innerHTML屬性
// var spanTag = document.querySelector('#span');
// 給標(biāo)簽賦值，可以使用innerHTML和innerText
// innerHTML中除了可以給標(biāo)簽設(shè)置普通字符串外，如果字符串中包含標(biāo)簽，標(biāo)簽會(huì)被解析出來(lái)（W3C規(guī)范，所有瀏覽器都可使用該方法）
// innerText中如果字符串包含了標(biāo)簽，則標(biāo)簽原樣顯示，并不會(huì)被解析（瀏覽器廠商聯(lián)盟私自定義的方法，有兼容性問(wèn)題）
// 獲取標(biāo)簽中的值
// innerHTML:如果標(biāo)簽中嵌套有子標(biāo)簽，則會(huì)把這些標(biāo)簽當(dāng)做字符轉(zhuǎn)樣式，連同文本一起輸出
// innerText:如果標(biāo)簽中嵌套有子標(biāo)簽，則只獲取標(biāo)簽里的文本。
// spanTag.innerHTML = '<a
//
// spanTag.innerText = "<a ;
// console.log(spanTag.innerText);
//
// console.log(spanTag.outerHTML);
spanTag.outerHTML = '<p>hello</p>'
}
</script>
</head>
<body>
<p>一只烏鴉口渴了</p>
<span id=span><a >到處找水喝</a></span>
</body>
</html>
查找文檔中的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#p {
color: red;
}
</style>
</head>
<body>
<p id='p'>一只烏鴉口渴了</p>
<p id='p'>到處找水喝</p>
<a class='link' href="#">百度一下</a>
<a class='link' href="#">新浪一下</a>
<a href="#">搜狗一下</a>
<input type="text" name="user" value="">
</body>
<script type="text/javascript">
// 查詢標(biāo)簽的范圍是整個(gè)html文件，也就是在document范圍中搜索指定的標(biāo)簽，所以要使用document對(duì)象調(diào)用相關(guān)查找方法。
// 因?yàn)閃3C協(xié)議規(guī)定id值唯一，所以通過(guò)id獲取標(biāo)簽，只能獲取一個(gè)標(biāo)簽，如果頁(yè)面中出現(xiàn)同名id，則只獲取匹配的第一個(gè)標(biāo)簽
var pTag = document.getElementById('p');
// console.log(pTag);
// 通過(guò)標(biāo)簽名獲取標(biāo)簽：可以獲取到頁(yè)面中所有的同名標(biāo)簽
// 返回值是一個(gè)類似于數(shù)組的數(shù)據(jù)類型，把所有匹配到的標(biāo)簽按照先后順序，利用下標(biāo)管理起來(lái)。
var aTags = document.getElementsByTagName('a');
// console.log(aTags[0]);
// 通過(guò)class名獲取標(biāo)簽
var linkTags = document.getElementsByClassName('link');
// console.log(linkTags);
// 通過(guò)name屬性值獲取input類型（form表單）的標(biāo)簽
var inputs = document.getElementsByName('user');
// console.log(inputs);
// 通過(guò)標(biāo)簽的選擇器獲取標(biāo)簽
// querySelector():不管頁(yè)面中與參數(shù)匹配的標(biāo)簽有幾個(gè)，只能拿到第一個(gè)匹配的標(biāo)簽
var tag = document.querySelector('.link');
// console.log(tag);
// querySelectorAll():可以獲取到頁(yè)面中所有與參數(shù)匹配的標(biāo)簽
var tags = document.querySelectorAll('.link');
console.log(tags);
</script>
</html>
標(biāo)簽常見(jiàn)屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
p {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p style="color:red;width:500px;height:500px">一只烏鴉口渴了</p>
</body>
<script type="text/javascript">
var pTag = document.querySelector('p');
// tagName屬性：保存的是當(dāng)前標(biāo)簽的名字
// console.log(pTag.tagName);
// 標(biāo)簽中的style屬性：保存的是標(biāo)簽的樣式信息（CSS代碼）;
// 因?yàn)橥ㄟ^(guò)js訪問(wèn)的style屬性是標(biāo)簽下的style屬性，所以只能獲取到行內(nèi)的樣式，如果該標(biāo)簽的樣式是其他樣式表設(shè)置的，則無(wú)法獲取對(duì)應(yīng)的值
console.log(pTag.style.width);
// 使用js給標(biāo)簽添加樣式
// pTag.style = 'background-color:red'
// 如果要獲取、修改的css樣式是多個(gè)單詞組成的，則需要轉(zhuǎn)為駝峰法的命名形式
// 通過(guò)js修改、獲取的CSS樣式，是行內(nèi)樣式
pTag.style.backgroundColor = 'red'
</script>
</html>
