JS DOM(一)笔记
DOM简介:
1、DOM:Document Object Model(简称文档对象模型),是专门用于操作网页内容API一套标准,网页内容:字符、图片等各种资源
2、核心DOM:操作一切结构化文档的API标准,特点:强大,万能;缺点:操作繁琐。
3、HTML DOM:专门操作HTML网页的API标准–针对核心DOM中部分API进行了简化!优点:操作相对简化;缺点:非万能。
4、对比:实际开发中HTML DOM使用频率相对较高,只有当HTML DOM无法实现某些功能时才会使用核心DOM。
DOM树:
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中的所有标签都是元素,DOM中使用element表示
节点:网页中所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
节点对象:
DOM上每一个节点,都是一个节点对象,提供了操作节点的API。
节点对象的属性:
1、nodeType:保存着节点的类型名!–不能明确获知节点名称
2、nodeName:保存节点的名称!–区分不同元素
3、nodeValue:保存元素的值!
正式操作DOM:增删改查! 操作流程:获取能够操作的元素–目标元素–绑定事件–获取需要操作的元素–事件具体操作
查找/获取:
1、getElementById获取元素
<div id="time">2023-5-21</div>
//1、因为我们文档页面从上往下加载,所以先得有标签,所以我们script写到标签的下面
//2、get 获得element元素 by 通过 驼峰命名法
//3、参数id 是大小写敏感的字符串
//4、返回的是一个元素对象
var timer=document.getElementById('time');
console.log(timer);
console.log(typeof timer);//检测数据类型
//5、console.dir打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
2、getElementsByTagName 获取元素
<ul>
<li>知否知否,应是绿肥红瘦1</li>
<li>知否知否,应是绿肥红瘦2</li>
<li>知否知否,应是绿肥红瘦3</li>
<li>知否知否,应是绿肥红瘦4</li>
<li>知否知否,应是绿肥红瘦5</li>
</ul>
<ol>
<li>知否知否,应是绿肥红瘦1</li>
<li>知否知否,应是绿肥红瘦2</li>
<li>知否知否,应是绿肥红瘦3</li>
<li>知否知否,应是绿肥红瘦4</li>
<li>知否知否,应是绿肥红瘦5</li>
</ol>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);//返回的是 获取过来元素对象的集合 以伪数组的形式存储的
console.log(lis[0]);//结果是<li>知否知否,应是绿肥红瘦1</li>
//我们想要依次打印伪数组中的元素可以采取遍历的形式
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
//父元素下面的子元素,必须指定单个元素
var ol=document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li');
</script>
3、H5新增获取元素方式
<html>
<body>
<script>
//1. getElementsByClassName 根据类名获得某些元素集合
var boxs =document. getElementsByClassName('box');
console. log(boxs);
//2. querySelector 返回指定选择器的第一个元素对象 切记里面的选择器需要加符 号. box #nav
var firstBox =document. querySelector('. box');
console. log(firstBox);
var nav =document. querySelector('#nav');
console. log(nav);
var li =document. querySelector('li');
console. log(li);
//3. querySelectorA11()返回指定选择器的所有元素对象集合
var allBox =document. querySelectorAll('. box');
console. log(allBox);
</script>
</body>
</html>
事件三要素
<body>
<button id="btn">唐伯虎</button>
<script>
//点击一个按钮,弹出对话框
//1、事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1)事件源事件被触发的对象 谁 按钮
var btn=document. getElementById('btn');
//(2)事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3)事件处理程序 通过一个函数赋值的方式 完成
btn. onclick =function(){
alert('点秋香');
}
</script>
</body>
修改元素的内容
1、.innerHTML:获取/修改元素中内容区域的内容
内容区域:从起始标记到结束标记之间的区域
取值:elem.innerHTML //获取元素elem的内容区域的内容
赋值:elem.innerHTML="新值";
注意:此API赋值的内容,浏览器会当作html代码解析!
2、.textContent:获取/修改元素elem的内容标记内的文本
取值:elem.textContent
赋值:elem.textContent="新值";
注意:此API赋值的内容,浏览器不会解析特殊字符,就是普通文本
3、.value:获取表单元素的value属性值
获取:var style1=elem.style.属性名;
修改:elem.style.属性名=值;
套路:可以将需要的样式设置在一个类中,通过修改class属性引入这个类。
elem.className="类名";
操作页面的元素
添加一个元素:
1>创建一个元素:var elem=document.createElement(“新元素”);
2>添加必要的属性和内容:elem.属性名1=值;elem.属性名2=值;elem.innerHTML=“百度一下”;
3>将创建的新元素追加到DOM树中指定的父节点下
1、在父元素的末尾追加新元素:parent.appendChild(elem);
2、中间插入:将新元素插入到兄弟元素之间:parent.insertBefore(elem,兄弟元素);
3、替换:parent.replace(elem,被替换的元素);