1、基础内容
1、DOM是HTML和XML文档的API,也就是一个应用程序的边城接口,DOM的基础内容我们会去学:如何获取一个元素,如何访问一个元素的样式,如何设置和删除属性。
2、DOM查找方法(两个基础查找)
2.1document.getElementById("id")
-功能:返回对拥有指定id的第一个对象的引用。
-返回值:DOM对象
-说明:id为DOM元素上id属性的值
1、下面展示一个基础的代码:当我们在控制台的时候,看到就是<div id="header">这是页面头部</div>,整个的id为header的div元素。假如你要找的id为header的元素不存在,那么控制台打印的就是为null。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="header">这是页面头部</div>
<script>
var box=document.getElementById("header");
console.log(box);
</script>
</body>
</html>
2.2document.getElementsByTagName("tag")
-功能:返回一个对所有tag标签引用的集合
-返回值:数组
-说明:tag为要获取的标签名称
下面写一个简单的代码:假如我们只是寻找文档中所有的li标签,直接使用document.getElementsByTagName("li")即可,document就是整个文档对象。但是我们现在只想获得ul标签下的li,那么先获取到这个ul标签,然后用这个ul元素作为对象去执行getElementsByTagName("li")这个方法,就能获取到ul下面的li标签。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<ul id="header">
<li>前端开发</li>
<li>后端开发</li>
<li>UI设计</li>
</ul>
<ol id="list1">
<li>js</li>
<li>html</li>
<li>css</li>
</ol>
<script>
var box=document.getElementsByTagName("li");
console.log(box.length);//6
console.log(box)//所有的li标签
var ul_li=document.getElementById("header").getElementsByTagName("li");//仅获取ul下面的li标签
console.log(ul_li.length);//3
console.log(ul_li);//ul下面的标签
</script>
</body>
</html>
在浏览器中的效果如下图:
3、给元素设置样式
通过Js也能动态的给元素设置样式,语法如下:ele就是元素,styleName就是样式名称,styleValue就是属性值
ele.style.styleName=styleValue;
1、值得注意的就是当我们的属性为-连接的复合属性的时候,我们需要将属性名称改写为驼峰形式:比如font-weight是复合形式的样式名称,我们要写成fontWeight这种形式。
2、使用getElementsByTagName方法得到的是数组,我们不能直接用数组来设置样式,因为ele必须是元素,所以我们必须去遍历数组,给每个数组中的元素设置样式,相同的样式直接设置,不用的元素有不同的样式,我们需要在循环中做判断。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<ul id="header">
<li>前端开发</li>
<li>后端开发</li>
<li>UI设计</li>
</ul>
<ol id="list1">
<li>js</li>
<li>html</li>
<li>css</li>
</ol>
<script>
var ul_li=document.getElementById("header").getElementsByTagName("li");//仅获取ul下面的li标签
for(let i=0;i<ul_li.length;i++){
//不同的样式
i==0?ul_li[i].style.color='#ccc':i==1?ul_li[i].style.color='#ff0':ul_li[i].style.color='#00f';
//相同的样式
ul_li[i].style.color='#ccc';
ul_li[i].style.fontWeight='bold';
}
</script>
</body>
</html>
4、innerHTML和className
4.1innerHTML
1、ele.innerHTML:返回ele元素开始和结束标签之间的HTML内容和文本内容。
2、ele.innerHTML="html":设置ele元素开始和结束标签之间的HTML的内容为html。
看下面的这个代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<ul id="header">
<li><b>前端开发<b></li>
<li>后端开发</li>
<li>UI设计</li>
</ul>
<ol id="list1">
<li>js</li>
<li>html</li>
<li>css</li>
</ol>
<script>
var ul_li=document.getElementById("header").getElementsByTagName("li");//仅获取ul下面的li标签
for(let i=0;i<ul_li.length;i++){
console.log(ul_li[i].innerHTML);
ul_li[i].innerHTML+="程序";
}
</script>
</body>
</html>
在浏览器和控制台上的效果是:
4.2、className
1、ele,className:返回ele元素的class属性
2、ele.className="cls":设置ele的class属性为cls
3、特别注意:当给一个元素动态添加class时候,原本这个元素就有自己的class,那么通过ele.className设置的class是和原来的元素的class合并还是替换呢?答案是替换,原本的class不复存在。所以:ele.className是重新设置类,替换元素本身的class。
4、如果元素有两个以上的class属性值,那么获取这个元素的className属性时,会将它的class属性值都打印出来。
5、DOM属性设置和
5.1、获取属性:ele.getAttribute("attribute")
-功能:获得ele元素的attribute属性(注意:attribute是要获取的html属性,如id,type等等)
1、标签的属性可以分为标准html属性和自定义属性,对于标准html属性(就说标签本来就具有这些属性)的值,可以通过DOM元素.属性直接获取,但是自定义的属性要通过getAttribute(“自定义属性的名称”)这种方式去获取值。
2、总结:标准的html属性值可以直接通过 元素.属性 的方法获得,除了class以外,因为class的属性值要通过className来获得。
3、下面的代码中,id,align都是p标签标准html属性,所以可以直接通过p.id和p.align来获取属性值,除了class,可以看到是undefined,只有通过className获取class属性值才正确。另外自定义属性和class可以通过getAttribute()方法去正确获得属性值。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p id="text" class="text" align="center" data-type="title">文本</p>
<script>
var p=document.getElementById("text");
console.log(p.id); //text
console.log(p.className);//text
console.log(p.getAttribute("class"));//text
console.log(p.getAttribute("data-type"));//title
console.log(p.class);//undefined
console.log(p.data-type);//语法错误
</script>
</body>
</html>
在浏览器控制台打印出的效果如下:
5.2、设置属性:ele.setAttribute("attribute",value)
-功能:在ele元素上设置属性(setAttribute这个方法又兼容性的问题)
5.3、删除属性:ele.removeAttribute("attribute")
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p id="text" class="text" align="center" data-type="title">文本</p>
<script>
var p=document.getElementById("text");
p.setAttribute("style","color:red");//设置了style属性为字体颜色为红色
p.removeAttribute("data-type");//移除了data-type这个属性
</script>
</body>
</html>
执行上面的代码,可以看到文本变成了红色,然后我们p标签中的data-type这个属性也被删除了。