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 @   漫漫长路</>  阅读(91)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaScript DOM 示例
·  JavaScript浏览器对象示例
·  JavaScript 对象
·  07-JavaScript对象
·  JavaScript 对象
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae