1. BOM編程

1.1. BOM編程基礎

全稱 Browser Object Model，瀏覽器對象模型。

JavaScript是由瀏覽器中內置的javascript腳本解釋器程序來執行javascript腳本語言的。

爲了便於對瀏覽器的操作，javascript封裝了對瀏覽器的各個對象使得開發者可以方便的操作瀏覽器。

1.2. BOM對象：

1.3. window 對象

Window 對象是 JavaScript 層級中的頂層對象。

Window 對象代表一個瀏覽器窗口或一個框架。

Window 對象會在 <body> 或 <frameset> 每次出現時被自動創建。

1.3.1. window中的方法

document 對 Document 對象的只讀引用

location 用於窗口或框架的 Location 對象

history 對 History 對象的只讀引用。

document.tilte 設置網頁的標題

   moveto()  將窗口左上角的屏幕位置移動到指定的 x 和 y 位置。

moveby() 相對於目前的位置移動。

resizeTo()   調整當前瀏覽器的窗口。

open() 打開新窗口顯示指定的URL（有的瀏覽器中是打一個新的選項卡）

setTimeout(vCode, iMilliSeconds) 超時後執行代碼。

setInterval(vCode, iMilliSeconds) 定時執行代碼，第一次也是先待，到時再執行。

2. 事件

a) 事件說明

基本上所有的HTML元素中都可以指定事件屬性。

每個元素支持什麼樣事件應查詢文檔。

所有的事件屬性都是以on開頭，後面的是事件的觸發方式，如：

onclick，表示單擊

onkeydown，表示鍵按下

...

b) 常用的事件類型：

鼠標點擊相關：

onclick 在用戶用鼠標左鍵單擊對象時觸發。

ondblclick 當用戶雙擊對象時觸發。

onmousedown 當用戶用任何鼠標按鈕單擊對象時觸發。

onmouseup 當用戶在鼠標位於對象之上時釋放鼠標按鈕時觸發。

鼠標移動相關：

onmouseout 當用戶將鼠標指針移出對象邊界時觸發。

onmousemove 當用戶將鼠標劃過對象時觸發。

焦點相關的：

onblur 在對象失去輸入焦點時觸發。

onfocus 當對象獲得焦點時觸發。

其他：

onchange 當對象或選中區的內容改變時觸發。

onload 在瀏覽器完成對象的裝載後立即觸發。

onsubmit 當表單將要被提交時觸發。

location 對象

Location 對象是由 JavaScript runtime engine 自動創建的，包含有關當前 URL 的信息。

location中的重要方法：

href屬性設置或獲取整個 URL 爲字符串。

reload() 重新裝入當前頁面

1.3.2. screen 對象

Screen 對象是由 JavaScript runtime engine 自動創建的，包含有關客戶機顯示屏幕的信息。

屬性：

availHeight 獲取系統屏幕的工作區域高度，排除 Microsoft Windows 任務欄。

availWidth 獲取系統屏幕的工作區域寬度，排除 Windows 任務欄。

height 獲取屏幕的垂直分辨率。

width 獲取屏幕的水平分辨率。

示例：

document.write("屏幕工作區: " + screen.availHeight + "," + screen.availWidth + "<br>");

document.write("屏幕分辨率: " + screen.height + ", " +screen.width + "<br>");

1.3.3. document對象

該對象代表整個文檔頁面

對象的集合：

all 獲取頁面所有元素對象

forms 獲取頁面所有表單對象

images 獲取頁面所有圖片對象

links 獲取所有超鏈接或area對象

具體的內容會在學習DOM時學習。

2. DOM

2.1. DOM簡介

全稱Document Object Model，即文檔對象模型。

DOM描繪了一個層次化的樹，允許開發人員添加、刪除、修改頁面的某一部分。

瀏覽器在解析HTML頁面標記的時候，其實不是按照一行一行讀取並解析的，

而是將HTML頁面中的每一個標記按照順序在內存中組建一顆DOM樹，

組建好之後，按照樹的結構將頁面顯示在瀏覽器的窗口中。

2.2. 節點層次

HTML網頁是可以看做是一個樹狀的結構，如下：

html

|-- head

| |-- title

| |-- meta

| ...

|--body

| |-- div

| |-- form

| | |-- input

| | |-- textarea

... ... ...

這是一顆樹，是由多個節點（Node）組成的，節點的類型有很多種。

節點最多有一個父節點，可以有多個子節點。

HTML DOM 定義了訪問和操作HTML文檔的標準方法。

document

代表當前頁面的整個文檔樹。

訪問屬性

all

forms

images

links

body

訪問方法(最常用的DOM方法)

<head>

// 獲取dom 樹, 獲取document 對象.

var dom = window.document;

// all 獲取頁面中所有的標籤節點 ,註釋和文檔類型約束.

function testAll() {

var allArr = dom.all;

alert(allArr.length);

for (var i = 0; i < allArr.length; i++) {

//獲取節點名稱

alert(allArr[i].nodeName);

}

// anchors 獲取頁面中的所有的錨連接.

function testAnchors() {

var anArr = dom.anchors;

alert(anArr.length);

}

// froms 獲取所有的form 表單對象

function testForms() {

var formArr = dom.forms;

alert(formArr.length);

alert(formArr[0].nodeName);

}

// images

function testImages() {

var imageArr = dom.images;

alert(imageArr.length);

}

// links 獲取頁面的超鏈接.

function testLinks() {

var linkArr = dom.links;

//alert(linkArr.length);

for (var i = 0; i < linkArr.length; i++) {

//alert(linkArr[i].nodeName);

}

for (var i in linkArr) {

alert(i);

}

//testLinks();

// 獲取頁面的Body

var body = dom.body;

alert(body.nodeName);

</script>

<title>javascript</title>

</head>

<form>

</form>

</body>

</html>

2.3. 獲取節點對象案例

document.getElementById("html元素的id")

document.getElementsByTagName("標籤名")

document.getElementsByName("html元素的name")

示例：

1，得到所有的div元素並顯示信息（innerHTML）。

2，得到所有div元素中id爲"test"的結果。

Var dom = window.document;

function testByTagName() {

var iptArr = dom.getElementsByTagName("input");

for (var i = 0; i < iptArr.length; i++) {

alert(iptArr[i].value);

}

// window 對象提供了一個事件, onload 事件 onload(頁面加載完畢執行該代碼) 是一個事件, 給事件一個方法,

//window.onload = testByTagName;

//2，得到所有標籤id爲"username"的結果。獲取舊value值並設置value值

function testById() {

var user = dom.getElementById("username");

alert(user.value);

user.value = "rose";

}

//testById();

//3. 獲取所有標籤name 爲like的元素.獲取value值.

function testByName() {

var likeArr = dom.getElementsByName("like");

for (var i = 0; i < likeArr.length; i++) {

alert(likeArr[i].value);

}

testByName();

2.3.1. 案例

顯示頁面任意一個節點對象的所有子節點的nodeName、nodeType、nodeValue

2.3.2. 屬性操作練習

1，寫一個form，其中有多個checkbox。

2，獲取所有選中的數量。

3，實現全選與全不選的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

function getSum()

{

需求：通過點擊總金額按鈕獲取被選中的條目的金額的總和，並將總金額顯示在按鈕右邊。

思路：

1，先獲取所有的checkbox對象。

2，對這些對象進行遍歷。判斷哪個對象被選中。

3，對被選中對象的金額進行累加。

4，顯示在按鈕右邊。

var items = document.getElementsByName("item");

var sum = 0;

for(var x=0; x<items.length; x++)

{

if(items[x].checked)

{

sum += parseInt(items[x].value);

}

var str = sum+"元";

document.getElementById("sumid").innerHTML = str.fontcolor('red');

}

function checkAll(node)

{

需求：通過全選checkbox，將其他條目都選中。

思路：

只要將全選checkbox的checked狀態賦值給其他的item checked狀態即可。

//var allNode = document.getElementsByName("all")[index];

var items = document.getElementsByName("item");

for(var x=0; x<items.length; x++)

{

items[x].checked = node.checked;

}

</script>

</head>

<body>

<input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br />

</body>

</html>

2.4. 通過節點關係查找節點

從一個節點出發開始查找：

parentNode 獲取當前元素的父節點。

childNodes 獲取當前元素的所有下一級子元素。

firstChild 獲取當前節點的第一個子節點。

lastChild 獲取當前節點的最後一個子節點。

nextSibling 獲取當前節點的下一個節點。（兄節點）

previousSibling 獲取當前節點的上一個節點。（弟節點）

示例1：

firstChild屬性最普遍的用法是訪問某個元素的文本：

var text=x.firstChild.nodeValue;

示例2：

parentNode 屬性常被用來改變文檔的結構。

假設您希望從文檔中刪除帶有 id 爲 "maindiv" 的節點：

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

2.4.1. 獲取節點對象的信息

每個節點都包含的信息的，這些屬性是：

nodeType 節點類型

nodeName 節點名稱

nodeValue 節點值

nodeType

nodeType 屬性可返回節點的類型。

---------------------------------

元素類型節點類型

------------------

元素 1 就是標籤元素，例<div>..</div>

文本 3 標籤元素中的文本

註釋 8 表示爲註釋

nodeName

nodeName 屬性含有某個節點的名稱。

--------------------------------

元素節點的 nodeName 是標籤名稱

屬性節點的 nodeName 是屬性名稱

文本節點的 nodeName 永遠是 #text

文檔節點的 nodeName 永遠是 #document

nodeValue

對於文本節點，nodeValue 屬性是所包含的文本。

對於屬性節點，nodeValue 屬性是屬性值。

對於註釋節點，nodeValue 屬性註釋內容。

nodeValue 屬性對於文檔節點和元素節點是不可用的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

//節點和節點之間的關係.

//獲取dom樹

var dom = window.document;

//獲取指定id 的標籤節點.

function test() {

var form = dom.getElementById("form1");

//獲取父節點.

//alert(form.parentNode.nodeName);

// 獲取子節點(Node 包含文本,註釋,標籤)

var childArr = form.childNodes;

//alert(childArr.length);

for (var i = 0; i < childArr.length; i++) {

alert(childArr[i]);

}

// 獲取第一個孩子.

var first = form.firstChild;

//alert(first);

//最後一個孩子.

var last = form.lastChild;

//alert(last);

// 獲取下兄弟(獲取弟弟)

var sibling = form.nextSibling;

//alert(sibling.nodeName);

// 獲取大哥

var previous = form.previousSibling;

alert(previous.nodeName);

}

test();

</script>

<title>javascript</title>

</head>

</form>

</body>

</html>

2.5. 節點操作

2.5.1. 創建新節點

document.createElement("標籤名") 創建新元素節點

elt.setAttribute("屬性名", "屬性值") 設置屬性

elt.appendChild(e) 添加元素到elt中最後的位置

elt.insertBefore(new, child); 添加到elt中，child之前。

// 參數1：要插入的節點參數

2：插入目標元素的位置

elt.removeChild(eChild) 刪除指定的子節點

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

創建節點：

document.createElement("標籤名") 創建新元素節點

elt.setAttribute("屬性名", "屬性值") 設置屬性

添加節點到文檔樹上:

elt.appendChild(e) 添加元素到elt中最後的位置把元素添加最後一個子節點的後面。

elt.insertBefore(new, child); 添加到elt中，child之前。

// 參數1：要插入的節點參數2：插入目標元素的位置

function add(){

var inputNode = document.createElement("input"); // 創建一個節點的對象

inputNode.setAttribute("type","file"); //給新節點設置type的屬性值。

var body = document.getElementsByTagName("body")[0];

body.appendChild(inputNode); //把新節點添加到body體中。

}

var count = 1;

function add(){

var trNode = document.createElement("tr");

var tdNode = document.createElement("td");

var inputNode = document.createElement("input");

inputNode.setAttribute("type","button");

inputNode.setAttribute("value",count+"");

count++;

tdNode.appendChild(inputNode);

trNode.appendChild(tdNode);

//trNode添加到指定的位置上。

var tbodyNode = document.getElementsByTagName("tbody")[0];

//tableNode.appendChild(trNode);

var button1 = document.getElementById("b1");

tbodyNode.insertBefore(trNode,button1); // 注意：使用obj.insertBefore(o1,o2)這個方法的時候

//obj必須是o1,o2的直接父節點。

//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);

}

</script>

<title>無標題文檔</title>

</head>

<body>

<table>

<tr>

<td>

</td>

</tr>

<td>

</td>

</tr>

</table>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function addFile(){

var trNode = document.createElement("tr");

var td1 = document.createElement("td");

var td2 = document.createElement("td");

td1.innerHTML="<input type='file'/>";

td2.innerHTML="<a href='#' οnclick='deleteFile(this)'>刪除附件</a>"

trNode.appendChild(td1);

trNode.appendChild(td2);

//把trNode添加到添加按鈕上面

var addButton = document.getElementById("addButton");

var tbody = document.getElementsByTagName("tbody")[0];

tbody.insertBefore(trNode,addButton);

}

function deleteFile(deleteNode){

//找到要刪除的tr a---->td---->tr

var trNode = deleteNode.parentNode.parentNode; //獲取到了要刪除的tr節點。

// 找到trNode的父節點

var tbodyNode =document.getElementsByTagName("tbody")[0];

tbodyNode.removeChild(trNode);

//trNode.removeNode(true); // removeNode() 在firefox上不支持，在ie支持。

}

</script>

<title>無標題文檔</title>

</head>

<body>

<table>

<tr>

</tr>

<td>

</td>

</tr>

</table>

</body>

</html>

2.5.2. 案例

1. 生成二級城市聯動菜單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

select{

width:100px;

}

</style>

function selcity()

{

//定義數據對應關係

//城市有很多，所以通過數組存儲。每一個省對應一個城市數組，怎麼建立對應關係呢？

//每一個省都有自己的角標。通過角標和數組建立對應關係，這就是二維數組。

var arr = [['--選擇城市--'],['海淀區','朝陽區','東城區','西城區']

,['瀋陽','大連','鞍山','撫順']

,['濟南','青島','煙臺','威海']

,['石家莊','廊坊','唐山','秦皇島']];

//獲取選擇的省的角標。

var selNode = document.getElementById("selid");

var index = selNode.selectedIndex;

var cities = arr[index];

var subSelNode = document.getElementById("subselid");

//有更簡單清除方式，只要改變下拉菜單的長度即可。

subSelNode.options.length = 0;

//清除上一次選擇的子菜單內容。

for(var x=1; x<subSelNode.options.length;)

{

alert(subSelNode.options.length+"..."+subSelNode.options[x].innerHTML+"..."+x);

subSelNode.removeChild(subSelNode.options[x]);

}

for(var x=0; x<cities.length; x++)

{

var optNode = document.createElement("option");

optNode.innerHTML = cities[x];

subselid.appendChild(optNode);

}

</script>

</head>

<body>

</select>

</select>

</body>

</html>

2.動態生成年、月、日字段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/**

* @author Administrator

//通過js創建年,月,日

//獲取Dom

var dom = window.document;

function myYear() {

//獲取年的select

var year = dom.getElementById("year");

//創建年

var minYear = 1900;

var maxYear = new Date().getFullYear();

for (var i = minYear; i <= maxYear; i++) {

//創建Option

var opt = dom.createElement("option");

//設置Option,標籤體.

opt.innerHTML = i;

opt.value = i;

//掛載節點

year.appendChild(opt);

}

function myMonth() {

var month = dom.getElementById("month");

//創建月

for (var i = 1; i <= 12; i++) {

//創建Option

var opt = dom.createElement("option");

//設置Option,標籤體.

if (i < 10) {

opt.innerHTML = "0" + i;

opt.value = i;

} else {

opt.innerHTML = i;

opt.value = i;

}

month.appendChild(opt);

}

month.onchange = myDay;

}

function myDay() {

clear();

//創建天

// 大月1 3 5 7 8 10 12 ,小月4 6 9 11 閏年2月非閏年的2月

//獲取年

var year = dom.getElementById("year").value;

//獲取月

var month = dom.getElementById("month").value;

if (year == "") {

alert("請選擇年");

return;

}

if (month == "") {

alert("請選擇月");

return;

}

//獲取天select

var day = dom.getElementById("day");

//一個月至少有28天.

for (var i = 1; i <= 28; i++) {

var opt = dom.createElement("option");

if (i < 10) {

opt.innerHTML = "0" + i;

opt.value = "0" + i;

} else {

opt.innerHTML = i;

opt.value = i;

}

day.appendChild(opt);

}

//大月

var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;

//小月

var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11;

//閏年可以整除4但不能整除100 或者年份可以整除400.

var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;

//判斷,如果是大月,添加3天

if (isBigMonth) {

//添加3天

for (var i = 29; i <= 31; i++) {

var opt = dom.createElement("option");

opt.innerHTML = i;

opt.value = i;

day.appendChild(opt);

}

} else if (isSmallMonth) {

//添加2天

for (var i = 29; i <= 30; i++) {

var opt = dom.createElement("option");

opt.innerHTML = i;

opt.value = i;

day.appendChild(opt);

}

} else if (isLeapYear) {

//如果是閏年,添加一天.專門處理閏年2月.

var opt = dom.createElement("option");

opt.innerHTML = 29;

opt.value = 29;

day.appendChild(opt);

}

function clear() {

var day = dom.getElementById("day");

var optArr = day.childNodes;

for (var i = optArr.length - 1; i >= 0; i--) {

day.removeChild(optArr[i]);

}

function getBirthday() {

//獲取Dom

var dom = window.document;

myYear();

myMonth();

}

getBirthday();

</script>

<title>javascript</title>

</head>

<body>

生日:

</select>

</select>

</select>

</body>

</html>

3. 生產一個驗證碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/**

* @author Administrator

//驗證碼 ,4位的,由字符,數字組成.

function createCode() {

var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

//隨機的從數組中取出4個元素.

var mess = "";

var index = 0;

for (var i = 0; i < 4; i++) {

//生成隨機數.而且是在數組的長度範圍內.

//0-9之間的隨機數. Math.floor(Math.random()*10)

//0到數組長度(不包含)之間的浮點數.,向下取整,

var index = Math.floor(Math.random() * datas.length);

mess += datas[index];

};

var codeSpan = window.document.getElementById("codeSpan");

codeSpan.style.color = "red";

codeSpan.style.fontSize = "20px";

codeSpan.style.background = "gray";

codeSpan.style.fontWeight = "900";

codeSpan.style.fontStyle = "italic";

codeSpan.style.textDecoration = "line-through";

codeSpan.innerHTML = mess;

codeSpan.value = mess;

}

createCode();

</script>

<title>javascript</title>

</head>

<body>

</body>

</html>

3. 正則表達式

位置：

^ 開頭

$ 結尾

次數：

* 0或多個

+ 1或多個

? 0或1個

{n} 就是n個

{n,} 至少n個

{n,m} 最少n個，最多m個

通配符：

\d 任意數字

\D 任意非數字

\s 任意空白

\S 任意非空白

. 任意字符（除'\n'外）

組合：

[a-z]

[0-9]

等

組：

(正則) 匹配括號中正則表達式對應的結果，並暫存這個結果。

(?:正則) 匹配括號中正則表達式對應的結果，但不暫存這個結果。

\數字使用第n個組匹配的結果

使用正則的工具（RegExp類與相關方法）

創建：

// 方式一

var regex = new RegExp("正則表達式", "標誌");

// 方式二

var regex = /正則表達式/標誌

參數說明：

正則表達式：

參見上面的規則

標誌：

g （全文查找出現的所有 pattern）

i （忽略大小寫）

m （多行查找）

方法：

Regexp.test( str )

String.replace( regex, str )

練習：校驗表單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

//用戶名的規則：第一位是字母，只有由數字與字母組成，6位。

function checkName(){

//獲取到了用戶名的值

var userName = document.getElementById("username").value;

var userSpan = document.getElementById("userId");

var reg = /^[a-z][a-z0-9]{5}$/i;

if(reg.test(userName)){

//符合規則

userSpan.innerHTML="正確".fontcolor("green");

return true;

}else{

//不符合規則

userSpan.innerHTML="錯誤".fontcolor("red");

return false;

}

//校驗密碼 6位

function checkPass(){

var password = document.getElementById("pwd").value;

if(password.length>0){

var reg = /^\w{6}$/;

var passSPan = document.getElementById("passId");

if(reg.test(password)){

//符合規則

passSPan.innerHTML="正確".fontcolor("green");

return true;

}else{

//不符合規則

passSPan.innerHTML="錯誤".fontcolor("red");

return false;

}

//檢驗密碼是否正確

function ensurepass(){

var password1 = document.getElementById("pwd").value; //第一次輸入的密碼

var password2 = document.getElementById("ensurepwd").value;

if(password2.length>0){

var enSpan = document.getElementById("ensure");

if(password1.valueOf()==password2.valueOf()){

enSpan.innerHTML="正確".fontcolor("green");

return true;

}else{

enSpan.innerHTML="錯誤".fontcolor("red");

return false;

}

//校驗郵箱

function checkEmail(){

var email = document.getElementById("email").value;

var reg = /^[a-z0-9]\w+@[a-z0-9]{2,3}(\.[a-z]{2,3}){1,2}$/i; // .com .com.cn

var emailspan = document.getElementById("emailspan");

alert(reg.test(email));

if(reg.test(email)){

//符合規則

emailspan.innerHTML="正確".fontcolor("green");

return true;

}else{

//不符合規則

emailspan.innerHTML="錯誤".fontcolor("red");

return false;

}

//校驗興趣愛好：至少要算中其中的一個。

function checkHoby(){

var likes = document.getElementsByName("like");

var hobySpan =document.getElementById("hobbySpan")

var flag = false;

for(var i = 0 ; i<likes.length ; i++){

if(likes[i].checked){

flag =true;

break;

}

if(flag){

//符合規則

hobySpan.innerHTML="正確".fontcolor("green");

return true;

}else{

//不符合規則

hobySpan.innerHTML="錯誤".fontcolor("red");

return false;

}

//總體校驗表單是否可以提交了如果返回的true表單纔可以提交。上面的表單項必須要每個都填寫正確。

function checkForm(){

var userName = checkName();

var pass = checkPass();

var ensure = ensurepass();

var email = checkEmail();

var hoby = checkHoby();

if(userName&&pass&&ensure&&email&&hoby){

return true;

}else{

return false;

}

</script>

<title>正則表達式</title>

</head>

<body>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

男

女</td>

</tr>

<tr>

eat

sleep

play

</td>

</tr>

<tr>

</select>

</td>

</tr>

<tr>

</tr>

</td>

</tr>

</table>

</form>

</body>

</html>

JavaScript BOM和DOM操作教程

1. BOM編程

1.1. BOM編程基礎

1.2. BOM對象：

1.3. window 對象

1.3.1. window中的方法

2. 事件

a) 事件說明

b) 常用的事件類型：

location 對象

1.3.2. screen 對象

1.3.3. document對象

2. DOM

2.1. DOM簡介

2.2. 節點層次

2.3. 獲取節點對象案例

2.3.1. 案例

2.3.2. 屬性操作練習

2.4. 通過節點關係查找節點

2.4.1. 獲取節點對象的信息

2.5. 節點操作

2.5.1. 創建新節點

2.5.2. 案例

3. 正則表達式

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

各種排序算法性能調優

xml加強筆記

JavaScript BOM和DOM操作教程

jsp傳參數到後臺出現亂碼的問題

oracle數據庫用戶及權限操作介紹

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

linux以太網驅動總結