目录
cssText（）方法（不常用，一般给元素加一个class属性）
查找子元素children[ ]firstElementChildlastElementChild；
查找兄弟元素previousElementSiblingnextElementSibling
innerHTML元素内部所有内容innerText元素内部的文本内容
DOM进阶
HTML属性操作
- 对象属性
- 对象方法
对象属性
obj.attr
如：oBtn.id
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取文本框、单选框、下拉列表的值</title>
</head>
<script type="text/javascript">
window.onload=function(){
var oBtn = document.getElementById("btn");
oBtn.onclick=function(){
var oTxt = document.getElementById("txt");
alert(oTxt.value);
}
}
</script>
<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>
<script>
window.onload=function(){
var oBtn = document.getElementById("btn");
var oSelect = document.getElementsByName("select")[0];
oBtn.onclick=function(){
alert(oSelect.value);
}
}
</script>
<body>
<input type="text" id="txt" /><input type="button" id="btn" value="获取"/>
<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>
<input type="button" id="btn" value="获取" />
</div>
<select name="select" >
<option value="北京">北京</option>
<option value="广东">广东</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
</select>
<input type="button" id="btn" value="获取" />
</body>
</html>
对象方法
-
obj.getAttribute("attr")
-
obj.setAttribute("attr","值")
-
obj.removeAtrribute("attr") class
-
obj.hasAttribute("attr")
1.obj.attr = obj.getAttribute( )
自定义属性用obj.attr（对象属性）无法实现，只能用（对象方法）getAttribute（）实现
oBtn.onclick=function(){
alert(oBtn.id);
alert(oBtn.getAttribute("id"));
}2.obj.attr=“值” = obj.setAttribute（“attr”，“值”）
设置某个属性的值
var oInput = document.createElement("input");
oInput.id="submit";
oInput.setAttribute("id","submit");3.obj.removeAttribute("attr")
oP[0].removeAttribute("class");4.obj.hasAttribute("attr")
返回布尔值
CSS属性操作
- 获取css属性值
- 设置css属性值
获取css属性值
getComputedStyle（obj）.attr
obj表示DOM对象，attr表示css属性名
| font-size | fontSize |
| border-bottom-width | borderBottomWidth |
| background-color | backgroundColor |
oBtn.id = oBtn["id"]
getComputedStyle(oBox).backgroundColor
等价于
getComputedStyle(oBox)["backgroundColor"]
设置css属性值
style对象
obj.style.attr=“值”；
attr采用骆驼峰型，即为一个变量，变量不允许出现-
oBtn.style.width = "100px"cssText（）方法（不常用，一般给元素加一个class属性）
obj.style.cssText = "字符串"
oDiv.style.cssText="wdith:100px;height:100px;border:1px solid gray;";为一个元素同时设置多个CSS属性很少使用cssText（）来实现，更倾向于使用操作HTML属性的方式加上一个class属性obj.className=class名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.oldBox{
width:100px;
height:100px;
background-color:hotpink;
}
.newBox{
width:50px;
height: 50px;
background-color: lightskyblue;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
var flag = true;
oBtn.onclick=function(){
if(flag)
{
oBox.className="newBox";
flag = false;
}
else{
oBox.className="oldBox";
flag = true;
}
}
}
</script>
<body>
<input type="button" id="btn" value="切换" />
<div id="box" class="oldBox">
</div>
</body>
</html>
DOM遍历(获取元素的补充)
查找父元素
obj.parentNode
var oParent = this.parentNode查找子元素
children[ ]
firstElementChild
lastElementChild；
oUl.removeChild(oUl.lastElementChild)查找兄弟元素
previousElementSibling
nextElementSibling
var preElement = oUl.children[2].previousElementSibling;innerHTML
元素内部所有内容
innerText
元素内部的文本内容
字符串换行\
body.innerHTML='<span>HTML</span>\
<span>JavaScript</span>\
<span>入门教程</span>';
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
