HTML | DOM 区域对象

HTML DOM 中的区域对象属性用于创建和访问对象中的元素。例如，使图像区域可点击并通过可在地图或其他对象中进一步使用的数据访问其他数据。

句法：

• 它用于访问 元素。

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

• 它用于创建 元素。

  var x = document.createElement("AREA");

属性值：

Value	Description
alt	It is used to set or return the value of the alt attribute of an area.
coords	It is used to set or return the value of the coords attribute of an area.
hash	It is used to set or return the anchor part of the href attribute value.
host	It is used to set or return the hostname and port part of the href attribute value.
hostname	It is used to set or return the hostname part of the href attribute value.
href	It is used to set or return the value of the href attribute of an area.
noHref	It is used to set or return the value of the nohref attribute of an area.
origin	It is used to returns the protocol, hostname and port part of the href attribute value.
password	It is used to set or return the password part of the href attribute value.
pathname	It is used to set or return the pathname part of the href attribute value.
port	It is used to set or return the port part of the href attribute value.
protocol	It is used to set or return the protocol part of the href attribute value.
search	It is used to set or return the querystring part of the href attribute value.
shape	It is used to set or return the value of the shape attribute of an area.
target	It is used to set or return the value of the target attribute of an area.
username	It is used to set or return the username part of the href attribute value.

示例 1：返回可点击图片的 href 属性。

    HTML DOM Area Object Property

  

    Click the button
    Click Here!
        
    
    
        
    
  
    
    
    
    
    
        function GFG() {
            
            //  Return href attribute.
            var x = 
            document.getElementById("Geeks").href;
            
            document.getElementById(
            "GEEK!").innerHTML = x;
        }
    

  

输出：

示例 2：创建区域元素并设置 href 属性。

    HTML DOM Area Object Property

  

    Click the button
    Click Here!
        
    
    
    
    
    
    
    
    
  
    
        function GFG() {
            
            // creating area element using 
            // document.createElement("AREA");
            var y = document.createElement("AREA");
            y.setAttribute("href",
"https://media.geeksforgeeks.org/wp-content/uploads/a1-24.png");
            y.setAttribute("shape", "rect");
            y.setAttribute("coords", "190, 0, 300, 100");
            document.getElementById("myMap").appendChild(y);
  
            document.getElementById("GEEK!").innerHTML =
                "Click on the GEEKS area in the image.";
        }
    

  

输出：

执行上述代码的步骤：

• 保存文件
• 在标准浏览器上执行。

支持的浏览器： DOM Area Object 属性支持的浏览器如下：

• 谷歌浏览器 5.0
• 浏览器 8.0
• 火狐 3.6
• Safari 5.0
• 歌剧 10.6