語雀鏈接
（1）檔案物件模型DOM
- 全稱：Document Object Model
- 檔案物件模型DOM（Document Object Model）定義訪問和處理HTML檔案的標準方法，DOM 將HTML檔案呈現為帶有元素、屬性和文本的樹結構（節點樹）
- HTML檔案是由節點構成的集合，常見的三種DOM節點
- 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標簽，
- 文本節點：向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本，
- 屬性節點：元素屬性，如<a>標簽的鏈接屬性href="http://www.imooc.com"，
（2）document根節點
- 相關方法都封裝在document物件中，document是整個檔案的根節點
- 輸出內容(document.write)
- 輸出HTML標簽
var mystr="hello";
document.write(mystr+"<br>");//輸出hello后，輸出一個換行符
- 輸出空格
document.write(" 1 2 3 ");//只會有一個空格
結果: 1 2 3
document.write("aa"+" "+"的忠實粉絲!");
（3）節點的訪問
getElementById()
- id是唯一的
- 如果存在多個相同的id，則回傳第一個
var mychar= document.getElementById('id');
getElementsByName()
- 因為檔案中的 name 屬性可能不唯一，所有 getElementsByName() 方法回傳的是元素的陣列，而不是一個元素
var mynode= document.getElementsByName('myt')
console.log(mynode.length)
console.log(mynode[0])
<input name="myt" type="text" value="https://www.cnblogs.com/ArthurWangWang/p/1">
<input name="myt" type="text" value="https://www.cnblogs.com/ArthurWangWang/p/2">
<input name="myt" type="text" value="https://www.cnblogs.com/ArthurWangWang/p/3">
<input name="myt" type="text" value="https://www.cnblogs.com/ArthurWangWang/p/4">
<input name="myt" type="text" value="https://www.cnblogs.com/ArthurWangWang/p/5">
<input name="myt" type="text" value="https://www.cnblogs.com/ArthurWangWang/p/6">
getElementsByClassName
<div >11</div>
<div >22</div>
<div >33</div>
<script type="text/javascript">
var divs = document.getElementsByClassName('con')
console.log(divs.length)
</script>
getElementsByTagName()
- 回傳帶有指定標簽名的節點物件的集合
querySelector
- 只得到符合條件的第一個元素
<div id="container">
<p >111</p>
<p >222</p>
<p >333</p>
</div>
<script type="text/javascript">
var item = document.querySelector('#container .name')
// <p >111</p>
console.log(item)
</script>
querySelectorAll
- 符合條件的所有元素
<div id="container">
<p >111</p>
<p >222</p>
<p >333</p>
</div>
var item = document.querySelectorAll('#container .name')
// 3
console.log(item.length)
// <p >111</p>
console.log(item[0])
childNodes
- IE瀏覽器會忽略節點之間生成的空白文本節點，而其它瀏覽器不會，
- 我們可以通過檢測節點型別過濾子節點
<div>
<p id="name">javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var aa = document.getElementsByTagName('div')[0].childNodes;
// 7
console.log(aa.length)
// #text, ,3 文本節點(空白)
// p, null, 1 元素節點
// #text, , 3 文本節點(空白)
// div, null, 1 元素節點
// #text, ,3 文本節點(空白)
// H5, null, 1 元素節點
// #text, , 3 文本節點(空白)
for (var i = 0; i < aa.length; i++) {
console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType);
}
</script>
children
- children可以避免文本節點，只考慮元素節點
<div>
<p id="name">javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var aa = document.getElementsByTagName('div')[0].children;
// p, null, 1 元素節點
// div, null, 1 元素節點
// H5, null, 1 元素節點
for (var i = 0; i < aa.length; i++) {
console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType);
}
</script>
firstChild
- 該屬性回傳‘childNodes’陣列的第一個子節點，如果選定的節點沒有子節點，則該屬性回傳 NULL
- node.firstChild
- 說明：與elementNode.childNodes[0]是同樣的效果，
firstElementChild
- 可以避免文本節點，只考慮元素節點
lastChild
- lastChild 最后一個子節點
- 該屬性回傳‘childNodes’陣列的最后一個子節點，如果選定的節點沒有子節點，則該屬性回傳 NULL
- node.lastChild
- 說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果，
lastElementChild
- 可以避免文本節點，只考慮元素節點
parentNode
- 獲取指定節點的父節點
<div id="text">
<p id="con"> parentNode 獲取指點節點的父節點</p>
</div>
<script type="text/javascript">
var mynode = document.getElementById("con");
// DIV
console.log(mynode.parentNode.nodeName)
</script>
nextSibling
nextElementSibling
previousSibling
previousElementSibling
- 訪問兄弟節點nextSibling previousSibling
- nextSibling 屬性可回傳某個節點之后緊跟的節點（處于同一樹層級中）， 如果無此節點，則該屬性回傳 null
- previousSibling 屬性可回傳某個節點之前緊跟的節點（處于同一樹層級中），如果無此節點，則該屬性回傳 null，
- 注意事項
- 兩個屬性獲取的是節點，Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略
- 解決問題方法：判斷節點nodeType是否為1, 如是不為元素節點，跳過，
- nextElementSibling可以避免文本節點，只考慮元素節點
- previousElementSibling可以避免文本節點，只考慮元素節點
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
（4）節點型別
- 元素節點、屬性節點、文本節點都有三個重要屬性
- 節點名 nodeName
- 節點值 nodeValue
- 節點型別 nodeType（元素1、屬性2、文本3、注釋8、檔案9）
<div>
<p id="name">javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var aa = document.getElementsByTagName('div')[0].childNodes;
// 7
console.log(aa.length)
// #text, ,3 文本節點(空白)
// p, null, 1 元素節點
// #text, , 3 文本節點(空白)
// div, null, 1 元素節點
// #text, ,3 文本節點(空白)
// H5, null, 1 元素節點
// #text, , 3 文本節點(空白)
for (var i = 0; i < aa.length; i++) {
console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType);
}
</script>
- 屬性節點
for (var i = 0; i < aa.length; i++) {
if(aa[i].nodeName == 'P'){
// 子節點
var ps = aa[i].childNodes
// 1
console.log(ps.length)
// #text,javascript,3
for(let j = 0; j < ps.length; j++){
console.log(ps[j].nodeName + ',' + ps[j].nodeValue + ',' + ps[j].nodeType)
}
var attrs = aa[i].attributes
// 1
console.log(attrs.length)
// id,name,2
for(let j = 0; j < attrs.length; j++){
console.log(attrs[j].nodeName + ',' + attrs[j].nodeValue + ',' + attrs[j].nodeType)
}
}
}
- 其他節點
// 檔案節點
// #document undefined 9
console.log(document.nodeName,document.nodeValue,document.nodeType)
for (var i = 0; i < document.childNodes.length; i++) {
var item = document.childNodes[i]
// html undefined 10 檔案宣告節點
// HTML undefined 1 html元素節點
console.log(item.nodeName,item.nodeValue,item.nodeType)
}
// BODY undefined 1 BODY節點
console.log(document.body.nodeName,document.body.nodeValue,document.body.nodeType)
// HEAD undefined 1 HEAD節點
console.log(document.head.nodeName,document.head.nodeValue,document.head.nodeType)
（5）節點屬性
innerHTML
- 設定元素的文本內容，支持HTML各類標簽
innerText
- 純文本方式設定元素的文本內容
<div id="div1">
<span>sss</span>
</div>
<script type="text/javascript">
var mychar = document.getElementById('div1');
// 網頁上顯示dddd
mychar.innerHTML = '<span>dddd</span>'
// <span>dddd</span>
console.log(mychar.innerHTML);
// 網頁上顯示<span>dddd</span>
mychar.innerText = '<span>dddd</span>'
// <span>dddd</span>
console.log(mychar.innerText);
</script>
style
- backgroudColor
- width
- height
- color
- font
- fontFamily
- display
- none：該元素不會被顯示
- block：該元素會被顯示為塊級元素
mychar.style.color='red';
mychar.style.fontSize='20';
mychar.style.backgroundColor='blue';
mychar.style.height='30px';
mychar.style.width='250px';
mychar.style.display = 'block';
className
- 設定元素的類選擇器
- className也可以在attributes陣列中找到
var p1 = document.getElementById("p1");
p1.className="one";
getAttribute
- 通過元素節點的屬性名稱獲取屬性的值
elementNode.getAttribute(name)
setAttribute
- setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值
elementNode.setAttribute(name,value)
removeAttribute
object.removeAttribute("style");
attributes
- 回傳該節點的所有屬性，是一個陣列
<div id="div1" style="width: 100px;">
<span>sss</span>
</div>
<script type="text/javascript">
var mychar = document.getElementById('div1');
var attrs = mychar.attributes
// 3
console.log(attrs.length)
// id
// class
// style
for(let i = 0; i < attrs.length; i++){
console.log(attrs[i])
}
</script>
（6）節點操作
createElement()
- createElement()方法可創建元素節點，此方法可回傳一個 Element 物件
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "https://www.cnblogs.com/ArthurWangWang/p/創建一個按鈕";
body.appendChild(input);
</script>
appendChild()
- 插入節點appendChild()：在指定節點的最后一個子節點串列之后添加一個新的子節點，
- ul添加一個li，內容為PHP
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題檔案</title>
</head>
<body>
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var add = document.createElement('li');
add.innerHTML = "PHP";
otest.appendChild(add);
</script>
</body>
</html>
- 下面的例子會發現p在div2中了，div1中沒有了
<div id="div1">
<p id="p1">aaa</p>
</div>
<div id="div2"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var p1 = document.getElementById('p1')
div2.appendChild(p1)
</script>
- appendChild不要重復添加
<div id="div1">
<div id="div2">2222</div>
</div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var div3 = document.createElement('div');
div3.innerHTML = '3333'
// div3 div2并列
div1.appendChild(div3);
// div3在div2里面，并且之前并列的div3不見了
//div2.appendChild(div3);
</script>
insertBefore
- insertBefore() 方法可在已有的子節點前插入一個新的子節點，
- 語法：insertBefore(newnode,node);
- newnode: 要插入的新節點，
- node: 指定此節點前插入節點，
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var add = document.createElement('li');
add.innerHTML = "PHP";
otest.insertBefore(add, otest.childNodes[2]);
</script>
removeChild
- 必須父節點呼叫
- removeChild() 方法從子節點串列中洗掉某個節點，如洗掉成功，此方法可回傳被洗掉的節點，如失敗，則回傳 NULL
- 注意: 把洗掉的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在記憶體中，可通過 x=null操作
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<script type="text/javascript">
var content = document.getElementById("content");
for (var i = content.childNodes.length - 1; i >= 0; i--) { // 倒敘洗掉
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
</script>
<button onclick="clearText()">清除節點內容</button>
replaceChild
- replaceChild 實作子節點(物件)的替換，回傳被替換物件的參考，
- 語法：node.replaceChild (newnode,oldnew )
- 引數：
- newnode : 必需，用于替換 oldnew 的物件
- oldnew : 必需，被 newnode 替換的物件
- b標簽換成i
<div>
<b id="oldnode">JavaScript</b>是一個很常用的技術，為網頁添加動態效果，
</div>
<a href="javascript:replaceMessage()"> 將加粗改為斜體</a>
<script type="text/javascript">
function replaceMessage() {
var oldnode = document.getElementById("oldnode");
var oldHTML = oldnode.innerHTML;
var newnode = document.createElement("i");
oldnode.parentNode.replaceChild(newnode, oldnode);
newnode.innerHTML = oldHTML;
}
</script>
createTextNode()
- 創建文本節點
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題檔案</title>
<style type="text/css">
.message {
width: 200px;
height: 100px;
background-color: #CCC;
}
</style>
</head>
<body>
<script type="text/javascript">
var element = document.createElement("p");
element.className = "message";
var textNode = document.createTextNode("I love JavaScript!");
element.appendChild(textNode);
document.body.appendChild(element);
</script>
</body>
</html>
cloneNode(true)
- true：深度克隆，所有子節點會被克隆
- false：只會克隆節點自身
- 節點操作后，節點原位置會丟失
- 下面的例子會發現p在div2中了，div1中沒有了
<div id="div1">
<p id="p1">aaa</p>
</div>
<div id="div2"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var p1 = document.getElementById('p1')
div2.appendChild(p1)
</script>
- 克隆
<div id="div1">
<p id="p1">aaa</p>
</div>
<div id="div2"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var p1 = document.getElementById('p1')
var p2 = p1.cloneNode(true);
div2.appendChild(p2)
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/225967.html
標籤：Html/Css