1. 程式人生 > >JS HTML DOM物件和指令碼函式的互呼叫(字串標識)

JS HTML DOM物件和指令碼函式的互呼叫(字串標識)

從目標物件到script函式的呼叫:

Js引擎會根據字串值,搜尋上下文,獲取指定型別名字的目標物件,對目標物件執行函式。

當然onclick=message()也是可以呼叫的(js函式是非字串形式)。

<input type="button"value="View message" onclick="message()">

也可以從script函式獲取目標物件的屬性和方法

從 JavaScript 訪問某個 HTML 元素(目標物件),通過ID,標籤名查詢到目標物件

,引數也是字串。

通過 id 找到 HTML 元素

通過標籤名找到 HTML 元素

通過類名找到 HTML 元素

varx=document.getElementById("intro");

varx=document.getElementById("main");

vary=x.getElementsByTagName("p");

提示:通過類名查詢 HTML 元素在 IE 5,6,7,8 中無效。

例項:

function myFunction()

{

document.getElementById("demo").innerHTML="HelloWorld";

document.getElementById("myDIV").innerHTML="Howare you?";

}

<h1 id="id1">My Heading1</h1>

<button type="button"onclick="document.getElementById('id1').style.color='red'"> //要用’red’

點選這裡

</button>

物件的訪問this及this下的遍歷

This可以指代當前的控制元件,遍歷一個物件可以遍歷到物件的屬性(故可以直接使用屬性)。

<html>

<head>

<scripttype="text/javascript">

functionvalidate_required(field,alerttxt)

{

with(field)

  {

  if (value==null||field.value=="")// value可以用field.value代替,物件下面的屬性都可以找到

    {alert(alerttxt);return false}

  else {return true}

  }

}

functionvalidate_form(thisform)

{

with(thisform) // thisform就是表單物件

  {

  if (validate_required(email,"Email must be filled out!")==false) // email可以用thisform.email代替,"email"不行

    {thisform.email.focus();return false}

  }

}

</script>

</head>

<body>

<formaction="submitpage.htm" onsubmit="return validate_form(this)"method="post">

Email:<input type="text" name="email" size="30">

<inputtype="submit" value="Submit">

</form>

</body>

</html>