【前端学习】 DOM进阶
程序员文章站
2024-03-20 10:16:16
...
获取动态DOM中的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var oBtn=document.getElementById("btn");
var oFruit =document.getElementsByName("fruit");
oBtn.onclick = function()
{
for(var i=0;i<oFruit.length;i++)
{
if(oFruit[i].checked)
{
alert(oFruit[i].value);
}
}
}
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" checked/>苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>- 设置HTML属性操作方法
- getAttribute() 获取元素的某个属性值 obj.getAttribute("attr")
- setAttribute() 设置 obj.setAttribute("attr",值）
- removeAttribute() 删除
- hasAttribute() 判断属性
- CSS属性操作
- getComputedStyle(obj).attr 获取CSS属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn");
var oBox=document.getElementById("box");
oBtn.onclick=function()
{
alert(getComputedStyle(oBox).backgroundColor);
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="获取颜色" />
<div id="box"></div>
</body>
</html>
- 设置CSS属性值 两种方法 style对象和csisText()方法
- obj.style.attr="值”
- obj.style.cssText="值” 同时设置多个值
DOM遍历
- 查找父元素
obj.parentNode - 查找子元素 childNode firstChild lastChild children firstElementChild lastElementChild
- 查找兄弟元素 previousSibling nextSibling previousElementSibling和nextElementSibling
innerHTML和innerText
- innerHTML方便获取和设置一个元素的内部元素
- innerText获取和设置一个元素的内部文本
上一篇： DOM和BOM
下一篇： 创建一棵完全二叉搜索树