javascript之dom访问属性

冰暮流星2026-04-08 11:47

javascript的DOM操作访问属性

访问属性语法方法和面向对象的访问属性方法很类似，不同的是DOM要先获取对象，面向对象方法是先声明对象

html 复制代码

<a href="http://www.baidu.com" target="_blank" id="baidu">百度</a>

首先要获取对象，上面的a标签的id是baidu

第一步为了简化操作先声明一个变量获取对象

第二步是访问对象，语法是对象.属性名

这里要获取a标签的href属性

javascript 复制代码

 let a=document.getElementById("baidu")
//获取并输出属性值
 console.log(a.getAttribute("href"))
//修改属性值，比如把href属性值改为新浪的网址
a.href="http://www.sina.com"

还有一种获取属性值，是使用特定方法

javascript 复制代码

let a=document.getElementById("baidu")
//使用getAttribute方法获取属性
console.log(a.getAttribute("href"))
//使用setAttribute修改属性
a.setAttribute("href","http://www.sina.com")

网页中通过input获取属性值比较常见，这里一般访问的是input的value属性值，默认在input标签里面，value属性值是空，通过访问属性的方式获取input的输入值

html 复制代码

用户名:<input type="text" id="username" value="tom">

上面的html代码显示的内容是一个输入框，里面有tom的内容，如果要把tom改为jim，代码如下

javascript 复制代码

//获取对象，这里使用另外一个获取方法
let b=document.querySelector("#username" )
//访问方法并修改属性值为jim
b.value='jim'