この記事について
この記事では以下のメソッドを使ってDOM要素の属性の取得と更新を行う
attr()
→指定したDOMU要素の取得と更新
data()
→指定したDOM要素の取得と更新
サンプルコード
以下のように取得を行う
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<title>sample</title>
</head>
<body>
<a href="hogehoge.com">googleリンク</a>
<script>
$(function(){
console.log($('a').attr('href'));
})
</script>
</body>
</html>
/aタグのhref属性を取得してコンソールhogehoge.comを表示している
取得、および更新は以下のように第２引き数を入れる
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<title>sample</title>
</head>
<body>
<a href="hogehoge.com">googleリンク</a>
<script>
$(function(){
$('a').attr('href', 'google.com');
//aタグのhref属性を取得してgoogle.comに書き換え
console.log($('a').attr('href'));
//aタグのhref属性を取得してコンソールでgoogle.comを表示している
})
</script>
</body>
</html>
data属性は以下のように引き数を指定することによって取得ができる
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<title>sample</title>
</head>
<body>
<a href="hogehoge.com" data-sitename="googleのサイト">googleリンク</a>
<script>
$(function(){
$('a').attr('href', 'google.com');
console.log($('a').attr('href'));
console.log($('a').data('sitename'));
})
</script>
</body>
</html>
//dataメソッドの引き数にsitenameと指定してdata属性を取得・表示