元素自身属性-1

前面学习了HTML元素通用的属性和方法

不同类型的HTML元素对应的 DOM 对象类型不同，属性也会有差异。

这里我们学习一些常用HTML元素对象自身的属性方法

注意：下面介绍的元素属性，如果没有特别标记为 只读 ，就是 既可读、也可写

a

a 对应的DOM对象类型是 HTMLAnchorElement

常用属性有： hash host hostname href origin port protocol search

下面是一个示例

<a href='https://www.byhy.net:80/py/lang/basic/09?name=byhy&pagenum=23#pop' 
   target='_blank'>
  测试连接
</a>

<br><br>
脚本运行结果如下
<pre style='font-size:1rem'></pre>

<script>
  let a = document.querySelector('a')
  let pre = document.querySelector('pre')
  pre.innerText = `
a.hash     = ${a.hash}
a.host     = ${a.host}
a.hostname = ${a.hostname}
a.href     = ${a.href}
a.origin   = ${a.origin }
a.port     = ${a.port}
a.protocol = ${a.protocol}
a.search   = ${a.search}
`
</script>

其中 search 属性获取的是url参数，每个参数由键值对组成。

如果要获取其中某个参数的值，可以这样

let params = new URLSearchParams(a.search);
let pagenum = parseInt(params.get("pagenum"));

button

button 对应的DOM对象类型是 HTMLButtonElement

常用属性有：

disabled

是个bool值，表示该按钮是否被禁用，禁用为true，可用为false

下面是一个示例

<button id='b0'>  被测按钮 </button>

<button id='b1'>  禁用/启动 </button>

<script>
  let b0 = document.querySelector('#b0')
  let b1 = document.querySelector('#b1')

  b0.addEventListener('click', ()=> alert(`可以被点击哦`))

  b1.addEventListener('click', ()=>{
      b0.disabled = !b0.disabled
      alert(`原来被测按钮 disable属性值为 ${b0.disabled}，改为 ${!b0.disabled}`)
    }
  )
</script>

img

img 对应的DOM对象类型是 HTMLImageElement

常用属性有：

alt

对应 img 元素的 alt属性，当图片显示失败时（比如url错误），在图片位置显示的文本内容

height

对应 img 元素的高度，数字为单位，表示像素

width

对应 img 元素的宽度，数字为单位，表示像素

src

对应 img 元素的的url地址

下面是一个示例

<img src="https://cdn2.byhy.net/imgs/logo01.png"
     alt="白月黑羽logo">

<br><br>

<button id='b1'>  查看属性 </button>
<button id='b2'>  修改属性 </button>
<button id='b3'>  重置 </button>

<script>
  let img = document.querySelector('img')
  let [b1,b2,b3] = document.querySelectorAll('button')

  function getImgProps(){
    return `
alt    = ${img.alt}
height = ${img.height}
width  = ${img.width}
src    = ${img.src}
`
  }

  b1.addEventListener('click', ()=> alert('图片属性为：' + getImgProps()))

  b2.addEventListener('click', ()=>{
      img.src = 'https://cdn2.byhy.net/imgs/api/tut_20200415160730_83.png'     
      img.alt = '修改后'
      img.height = 27
      img.width  = 182
    }
  )

  b3.addEventListener('click', ()=> location.reload())
</script>