js(javaScript)學習系列--DOM

還是那句話，可以去看w3school

當網頁被加載的時候，瀏覽器會創建頁面的文檔對象模型(document object model : DOM)

html DOM tree

javascript可以改變網頁的哪些部分

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

如何找到需要修改的元素

通過 id 找到 HTML 元素

// 查找id = intro的元素
 var x=document.getElementById("intro");

通過標籤名找到 HTML 元素

var x=document.getElementById("main");
// 返回的是一個數組，包含所有用了<p>的標籤，y[0]表示第一個
var y=x.getElementsByTagName("p");

通過類名找到 HTML 元素

document.getElementsByClassName("intro");

通過類名查找 HTML 元素在 IE 5,6,7,8 中無效

如何改變css樣式

document.getElementById(id).style.property=new style

document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

對html事件的響應

例如
- 當用戶點擊鼠標時
- 當網頁已加載時
- 當圖像已加載時
- 當鼠標移動到元素上時
- 當輸入字段被改變時
- 當提交 HTML 表單時
- 當用戶觸發按鍵時

當網頁已加載時, onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。(onunload似乎無效，暫時沒有觸發不知道什麼原因)
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
例如

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("已啓用 cookie")
    }
else
    {
    alert("未啓用 cookie")
    }
}
</script>

<p>提示框會告訴你，瀏覽器是否已啓用 cookie。</p>
<p onload="checkCookies()"> in here is not useful </p>
</body>
</html>

如果onload在p或者html 中調用會怎樣，答案是無效

當用戶點擊鼠標時 onclick，方法名不能是click(實測，如果是click會點擊無效)

<!DOCTYPE html>
<html>
<body>
<!-- 如果這一行放在</script>的後面，會導致不生效-->
<button id="myBtn">點擊這裏</button>
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
function changetext(id)
{
id.innerHTML="謝謝!";
}
</script>
<h1 onclick="this.innerHTML='謝謝!'">請點擊該文本</h1>

<h2 onclick="changetext(this)">請點擊該文本</h2>

<p id="demo"></p>

</body>
</html>

這裏說明html解析式從上往下的，也就是說先解析的順序是button、javascript、h1、h2、p，如果button在後面，那麼在javascript中是找不到這個button的。

當鼠標移動到元素上時onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠標移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="謝謝"
}

function mOut(obj)
{
obj.innerHTML="把鼠標移到上面"
}
</script>

</body>
</html>

當用戶觸發按鍵時 onmousedown、onmouseup 以及 onclick 事件

最好和onmouseout配合使用
這裏當鼠標移出控件範圍的時候會調用和釋放鼠標相同的方法

<!DOCTYPE html>
<html>
<body>
<button>
<div onclick="mClick(this)" onmousedown="mDown(this)" onmouseup="mUp(this)" onmouseout="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">請點擊這裏</div>
</button>
<script>
function mClick(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="點擊發生"
}
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="請釋放鼠標按鈕"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="請按下鼠標按鈕"
}
</script>

</body>
</html>

獲得焦點和失去焦點onfocus,onblur

如果失去焦點的時候顏色改爲#00000000,那麼，當失去焦點的時候，顏色並不會改變，但是如果是#000000黑色，那麼顏色會改變,似乎不能識別透明度，例如#3f000000 也是無效的

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
function loseFocue(x)
{
x.style.background="#000000";
}
</script>
</head>
<body>

請輸入英文字符：<input type="text" onfocus="myFunction(this)" onblur="loseFocue(this)">

<p>當輸入字段獲得焦點時，會觸發改變背景顏色的函數。</p>

</body>
</html>

當輸入字段被改變時 onchange 事件

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

請輸入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>當您離開輸入字段時，會觸發將輸入文本轉換爲大寫的函數。</p>

</body>
</html>

DOM節點

再看看這幅圖

添加一個dom節點

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

<script>
var para=document.createElement("p"); <!--該文檔 創建一個p元素-->
var node=document.createTextNode("這是新段落。");<!--該文檔 添加一個文本節點-->
para.appendChild(node);<!--p元素添加這個文本節點到最後-->

var element=document.getElementById("div1");<!--找到div1這個控件-->
element.appendChild(para);<!--把之前創建的p節點添加到div1控件的後面-->

var para=document.createElement("p"); <!--該文檔 創建一個p元素-->
var node=document.createTextNode("insert 這是新段落。");<!--該文檔 添加一個文本節點-->
para.appendChild(node);<!--p元素添加這個文本節點-->
var element=document.getElementById("div1");<!--找到div1這個控件-->
var child=document.getElementById("p1");
element.insertBefore(para,child);<!--p元素添加這個文本節點p1的前面-->
</script>

</body>
</html>
</script>

</body>
</html>

由此可以看出，p下面還有一個節點，這個節點就是文本

刪除一個節點

例子：點擊按鈕，刪除一個段落，可以看到必須要通過它的父view來控制它

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
<button onclick="mclick()">button</button>
</div>

<script>
function mclick(){
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);<!--div1這個節點刪除一個叫p1的節點-->
}
</script>

</body>
</html>

替換一個node

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>

導航，父node，firstnode，lastnode

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<div>
<p id="test">tset0 Hello World!</p>
<p id="test">tset1 Hello World!</p>
</div>

<script>
x=document.getElementById("test");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

pageTan

發佈了121 篇原創文章 · 獲贊 19 · 訪問量 11萬+

私信關注

js(javaScript)學習系列--DOM

html DOM tree

javascript可以改變網頁的哪些部分

如何找到需要修改的元素

如何改變css樣式

對html事件的響應

當網頁已加載時, onload 和 onunload 事件

當用戶點擊鼠標時 onclick，方法名不能是click(實測，如果是click會點擊無效)

當鼠標移動到元素上時onmouseover 和 onmouseout 事件

當用戶觸發按鍵時 onmousedown、onmouseup 以及 onclick 事件

獲得焦點和失去焦點onfocus,onblur

當輸入字段被改變時 onchange 事件

DOM節點

添加一個dom節點

刪除一個節點

替換一個node

導航，父node，firstnode，lastnode

Git操作指南：多人協作提交代碼的規範

越來越難了~

ComfyUI 完全入門：ControlNet 使用教程

DecelerateInterpolator(float factor)

cancel事件

js(javaScript)學習系列--window

java float

神奇的數學——三次方程

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結