JavaScript HTML 对象示例（Objects Examples）

 

 

一. 锚对象(Anchor Object)

二.区域对象

三.基础对象

四.IFrame对象

五.图像对象

 

 

 

 

 

 

 

 

一. 锚对象(Anchor Object)

1.1  查找链接的href属性值

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the href attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").href;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

1.2  查找链接的hreflang属性值

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" hreflang="en-us" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the hreflang attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").hreflang;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

1.3  找到一个链接的id属性值

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the id attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").id;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

1.4  查找链接的rel属性值

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" rel="nofollow" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the rel attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").rel;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

1.5  查找链接的目标属性值

<!DOCTYPE html>
<html>
<body>

<p><a id="w3s" target="_self" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to display the value of the target attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("w3s").target;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

1.6  查找链接的类型属性的值

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" type="text/html" href="https://www.w3schools.com/">W3Schools</a></p>

<p>Click the button to return the value of the type attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").type;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

 

 

二.区域对象（area）

2.1  查找图像地图区域的替代文本

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="A beautiful planet" href="venus.htm">
</map>

<p>Click the button to display the alternate text for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").alt;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

2.2  找到一个区域的坐标

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the coordinates for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").coords;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

2.3  找到一个区域的形状

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to return the shape of the "venus" area in the image-map.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").shape;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

2.4  查找区域的href

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the value of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").href;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

2.5  查找区域的href属性的协议部分

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the protocol of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").protocol;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

2.6  查找一个区域的href属性的端口号部分

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the port of the href attribute for the "venus" area in the image-map.</p>

<p><b>Note:</b> If the port part is not specified in the URL, or if the port number is 80 (which is default), some browsers will just display 0 or nothing.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").port;
  document.getElementById("demo").innerHTML = "Port: " + x;
}
</script>

</body>
</html>

 

2.7  查找一个区域的href属性的路径部分

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p>Click the button to display the pathname of the href attribute for the "venus" area in the image-map.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").pathname;
  document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

 

2.8  查找区域的href属性的查询字符串部分

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm?id=venus">
</map>

<p>Click the button to display the querystring part of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").search;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

2.9  查找一个区域的href属性的hash部分

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm#description">
</map>

<p>Click the button to display the anchor part of the href attribute for the "venus" area.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").hash;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

2.10  查找一个区域的目标属性值

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" target="_self">
</map>

<p>Click the button to return the value of the target attribute for the "venus" area in the image-map.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var x = document.getElementById("venus").target;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

 

 

 

 

 

三.基础对象

3.1  查找页面上所有相对URL的基本URL

3.2  查找页面上所有链接的基本目标

 

 

 

 

四.IFrame对象

4.1  更改iframe的背景颜色

4.2  查找iframe的高度

4.3  查找iframe的name属性的值

4.4  查找iframe的源(src)属性

4.5  更改iframe的源(src)属性

 

 

 

 

 

五.图像对象

5.1  查找图像的替戴文本

5.2  查找图像的高度

5.3  单击以显示图像的高分辨率版本

5.4  查找图像的源(src)

5.5  更改图像的来源

5.6  更换灯泡的来源

5.7  查找图像的usemap属性的值

 

 

 

 

六.表对象

6.1  更改表格边框的宽度

6.2  更改表格的填充

6.3  查找单元格的innerHTML

6.4  为表格创建标题

6.5  删除表中的行

6.6  向表中添加行

6.7  更改表格单元格的内容

 

posted @ 2022-01-28 17:59  漫漫长路</>  阅读(84)  评论(0)  编辑  收藏  举报