Js文档对象模型（DOM）
2018-07-29 本文已影响14人
老衲灬
DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。 它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。
<body>
<p id="p">id=p的p标签</p>
<p class="p">class=p的p标签1</p>
<p class="p">class=p的p标签2</p>
<p name="p">name=p的p标签1</p>
<p name="p">name=p的p标签2</p>
<script type="text/javascript">
//查找节点：
//通过id查找节点
document.getElementById('p').style.background = "red";
//通过class查找节点
var a = document.getElementsByClassName('p');
a[0].style.background = "green";//循环遍历可修改多个
//通过name查找节点
var b = document.getElementsByName('p');
b[1].style.background = "yellow";
//通过tag查找节点
var c = document.getElementsByTagName('p');
c[2].style.background = "purple";
//通过css选择器值选择节点
//当有多个符合条件的时候只选中第一个
document.querySelector('#p').style.background = "red";
//选择符合条件的多个
var a = document.querySelectorAll('.p');
a[0].style.background = "yellow";
</script>
</body>
<body>
<input type="button" value="按钮" id="btn">
<script type="text/javascript">
var btn = document.getElementById('btn');
//点击按钮进行弹框
btn.onclick = function(){
alert("heshangzhou");
}
</script>
</body>
<body>
<p id="p">666666</p>
<input type="button" value="按钮" id="btn">
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
//点击按钮改变文字
btn.onclick = function(){
var p = document.getElementById("p");
p.innerText = "888888";
}
</script>
<body>
<a href="#" id="a">百度一下</a>
<input type="button" value="修改" id="btn">
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
//点击按钮改变链接
btn.onclick = function(){
var a = document.getElementById("a");
a.href = "http://www.hsz.com";
a.innerText = "hsz";
}
</script>
<body>
<img src="./abc.jpg" id="img">
<input type="button" value="修改" id="btn">
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
//点击按钮改变图片大小
btn.onclick = function(){
var img = document.getElementById("img");
img.width = 100;
img.style.height = '60px';
}
</script>
<body>
<input type="button" value="修改" id="btn">
</body>
<script type="text/javascript">
//点击按钮改变按钮文字
document.getElementsByTagName('input')[0].onclick = function(){
this.value = "按钮";
}
</script>
<body>
<img src="./abc.jpg" id="img">
</body>
<script type="text/javascript">
//每次点击图片都使图片的宽度-10px
document.getElementById('img').onclick = function(){
img.width = img.width-10;
}
</script>
<body>
<input type="button" value="厉害了"><br>
<input type="button" value="厉害了"><br>
<input type="button" value="厉害了"><br>
<input type="button" value="厉害了"><br>
<input type="button" value="厉害了"><br>
<input type="button" value="厉害了"><br>
<input type="button" value="厉害了"><br>
</body>
<script type="text/javascript">
//点谁谁不改，其它全改
var btn = document.querySelectorAll('input');
for(var i in btn){
btn[i].onclick = function(){
//获取被点击按钮的值
var val = this.value;
if(val=="厉害了"){
var valFan = "不厉害";
}else{
var valFan = "厉害了";
}
for(var j in btn){
//判断当前标签是否是被点击的标签
//如果不是则改变其值
if(btn[j] != this){
btn[j].value = valFan;
}
}
}
}
</script>
