文章目录
JavaScript的 DOM基础
DOM查找方法
document.getElementById(“id”)：
语法：document.getElementById(“id”)
功能：返回对拥有指定ID的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值
<body>
<div id="box" class="box">元素</div>
<script>
//获取id为box的这个元素
var box = document.getElementById("box");
console.log(box);
//输出 <div id="box" class="box">元素</div>
</script>
</body>
document.getElementsByTagName(“tag”)：
语法：document.getElementsByTagName(" tag ")
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称
<body>
<ul id="list1">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
</ul>
<ol>
<li>js原生</li>
<li>js框架</li>
</ol>
<script>
//获取页面中所有的li
var lis = document.getElementsByTagName("li");
console.log(lis.length);
//输出5,返回的是数组,表示5个li
//获取id为list1下的所有的li
var lis2 = document.getElementById("list1").getElementsByTagName("li")
console.log(lis2.length);
//输出长度3
</script>
</body>
设置元素样式
ele.style.styleName = styleValue
语法：ele.style.styleName = styleValue
功能：设置ele元素的CSS样式
说明：
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称（不能使用" - "连字符形式 font-size 使用驼峰命名形式fontSize）
3、styleValue为设置的样式值
<body>
<div id="box" class="box">元素</div>
<ul id="list">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
</ul>
<script>
//设置id为box的这个元素的文字颜色
var box = document.getElementById("box");
box.style.color = "#f00";
//属性是减号链接的复合形式时,必须要转换为驼峰形式
box.style.fontWeight = "bold";
var lis = document.getElementById("list").getElementsByTagName("li");
//因为getElementsByTagName返回的是数组
//遍历每一个li
for (var i=0,len=lis.length; i<len; i++){
console.log(lis[i]);
//输出lis[0],等于<li>前端开发</li>
//输出lis[1],等于<li>服务器端开发</li>
//输出lis[2],等于<li>UI设计</li>
lis[i].style.color = "#00f";//设置为蓝色
//设置li的背景颜色
if(i == 0){
lis[i].style.backgroundColor = "#ccc";
}else if(i == 1){
lis[i].style.backgroundColor = "#ff0";
}else if(i == 2){
lis[i].style.backgroundColor = "#0f0";
}else{//其他
lis[i].style.backgroundColor = "#333";
}
}
<script>
</body>
DOM(innerHTML和className)
innerHTML
1、语法：ele.innerHTML
1、功能：返回ele元素开始和结束标签之间的HTML
2、语法：ele.innerHTML = " html "
2、功能：设置ele元素开始和结束标签之间的 HTML内容为html
className
1、语法：ele.className
1、功能：返回ele元素的class属性
2、语法：ele.className=" cls "
2、功能：设置ele元素的class属性为cls
<body>
<div id="box" class="box">元素</div>
<ul id="list">
<li>前端开发</li>
<li class="on">服务器端开发</li>
<li>UI设计</li>
</ul>
<ol>
<li>js原生</li>
<li>js框架</li>
</ol>
<script>
var lis = document.getElementById("list").getElementsByTagName("li");
for(var i=0, len=lis.length; i<len; i++){
console.log(lis[i].innerHTML);
//输出li的HTML,包括li里的标签和文本
//<i>前端开发</i>
//<b>服务器端开发</b>
//UI设计
lis[i].innerHTML = lis[i].innerHTML + '程序';
//简写：lis[i].innerHTML += '程序';
//输出每个li文本后面都加上程序两个字
//前端开发程序
//服务器端开发程序
//UI设计程序
//添加类current
lis[1].className = "current";
//说明：li本身有class="on",className动态添加class,是重新设置类，会替换元素本身的class
}
console.log(document.getElementById("box").className);
//输出box
</script>
</body>
DOM属性获取与设置、删除
获取属性、自定义属性的getAttribute()
<body>
<p id="text" class="text" align="center" data-type="title">文本</p>
<input id="user" type="text" name="user" value="user" validate="true">
<script>
var p = document.getElementById("text");
//除了获取class属性是className,其他是直接是html标签属性
console.log(p.className);
//输出text
console.log(p.align);
//输出center
//data-type是自定义属性,所以console.log(p.data-type)获取不了
console.log(p.getAttribute("data-type"));
//输出title
console.log(p.getAttribute("class"));
//等于p.className
var user = document.getElementById("user");
//获取input自带的标签属性
console.log(user.type);//输出text
console.log(user.name);//输出user
console.log(user.value);//输出user
//获取input自定义属性
console.log(user.getAttribute("validate"));//输出true
</script>
</body>
设置属性 ele.setAttribute(“attribute”,“value”)
语法：ele.setAttribute(“attribute”,“value”)
功能：在ele元素上设置属性
说明：
1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
注意：
1、setAttribute方法必须要有两个参数
2、如果value是字符串，需加引号
3、setAttribute()有兼容性问题
删除属性 ele.removeAttribute(“attribute”)
语法：ele.removeAttribute(“attribute”)
功能：删除ele上的attribute属性
说明：
1、ele是要操作的dom对象
2、attribute为要删除的属性名称
<body>
<p id="text" class="text" align="center" data-type="title">文本</p>
<input id="user" type="text" name="user" value="user" validate="true">
<script>
var p = document.getElementById("text");
var user = document.getElementById("user");
//给p设置一个自定义属性data-color的属性
p.setAttribute("data-color","red");
//给input设置一个isRead的属性
user.setAttribute("isRead","false");
//删除p上的align属性
p.removeAttribute("align");
</script>
</body>