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 更改表格单元格的内容

相关阅读:
选择排序与冒泡排序
 判断是否为偶数
 mysql基础之mysql双主（主主）架构
 mysql基础之mysql主从架构半同步复制
 mysql基础之mysql主从架构
 mysql基础之数据库备份和恢复实操
 mysql基础之数据库备份和恢复的基础知识
 mysql基础之日志管理（查询日志、慢查询日志、错误日志、二进制日志、中继日志、事务日志）
mysql基础之查询缓存、存储引擎
 mysql基础之数据库变量（参数）管理
原文地址：https://www.cnblogs.com/hechunfeng/p/15853463.html