复习

1、元素内容控制innerHTML:控制双标签的元素内容 可以支持html标签innerText：不支持html标签value：针对表单元素三个属性 直接调用 表示获取元素的值 赋值表示设置
2、元素属性控制1、dom对象调用方法完成：基本上所有的属性都可以控制(自定义属性)，布尔属性会存在问题dom对象.getAttribute(属性名称)dom对象.setAttribute(属性名称,值)dom对象.removeAttribute(属性名称)2、dom对象调用属性完成 只能针对标签自带属性可以控制，但是可以解决布尔属性的设置问题dom对象.标签上自带的属性名称
3、样式控制1、获取样式1、dom对象.style.样式名称  只能获取行内2、window.getComputedStyle(dom对象).样式名称2、设置样式dom对象.style.样式名称 = 值

进度条案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.big {width: 300px;height: 20px;border: 1px solid #eee;}.small {width: 0;height: 20px;background-color: green;}</style>
</head><body><div class="big"><div class="small" style="width: 0px;"></div></div><input type="button" class="start" value="上传"><input type="button" class="stop" value="暂停"><input type="button" class="continue" value="继续"><input type="button" class="zero" value="清空">
</body></html>
<script src="common.js"></script>
<script>/*1、点击上传按钮  定时的修改small的宽度 直到 宽度与big 相同就停止2、点击暂停暂停 停止定时器3、点击继续按钮 定时的修改small的宽度 直到 宽度与big 相同就停止4、点击清空按钮 重置small的宽度 并且停止定时器*/var timer;var smallDom = document.querySelector('.small');var bigDom = document.querySelector('.big');var bigWidth = parseInt(getStyle(bigDom, 'width')); //获取到big的宽度function go() {// timer中如果已经记录了定时器标识 表示正在运行中if (timer) {return}timer = setInterval(function () {//获取small的当前宽度  因为取出的值携带px单位var now = parseInt(getStyle(smallDom, 'width'));if (now >= bigWidth) {clearInterval(timer);} else {smallDom.style.width = now + 5 + 'px'}}, 100)}document.querySelector('.start').onclick = go;document.querySelector('.stop').onclick = function () {clearInterval(timer);// 清除定时器 不是表示timer变量中内容就被清除 还是继续记录着标识。需要重置为0timer = 0;}document.querySelector('.continue').onclick = go;document.querySelector('.zero').onclick = function () {clearInterval(timer);smallDom.style.width = 0;timer = 0;}
</script>

DOM节点操作

dom节点介绍

1、html标签结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fDMkp2ph-1660728272840)(img/1660707187375.png)]

2、浏览器对标签的管理方式

由于html标签组成了一种树形结构，浏览器需要管理好这个树形结构。为每一个标签都分配了一个对象(dom对象)

所以dom对象组合到一起也形参了一个树形结构(dom树)

浏览器在解析html页面时，是两棵树（dom对象与样式）的合并最后显示

dom对象属于一种节点

节点类型

<div class="main" id="box">a<!-- 注释内容 -->b<p>content</p>c
</div>
<script>// childNodes 获取到当前节点下所有子节点console.log(document.querySelector('div').childNodes);// attributes 获取当前节点对应的所有属性节点console.log(document.querySelector('div').attributes)
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nGs2QR5x-1660728272841)(img/1660708355369.png)]

页面上可以见到的节点包括文本节点、注释节点、元素节点、属性节点

节点属性

对于页面中每一个信息,都是使用节点对象进行表示(标签元素经常叫做dom对象)。节点对象上就会存在很多的属

性，节点属性就是介绍在不同类型节点中通用属性

<div class="main" id="box">a<!-- 注释内容 -->b<p>content</p>c
</div>
<script>var divDom = document.querySelector('div');var divDomChild = divDom.childNodes;// 获取到所有的属性节点var attrs = divDom.attributes;// console.log(divDomChild)console.log(attrs);// 1、节点类型  nodeTypeconsole.log(divDomChild[0].nodeType);//3  表示文本节点console.log(divDomChild[1].nodeType);//8  表示注释节点console.log(divDomChild[3].nodeType);//1  表示元素节点console.log(attrs[0].nodeType);//2 表示属性节点// 2、节点名称 nodeName(记忆)console.log(divDomChild[0].nodeName);//  #textconsole.log(divDomChild[1].nodeName);//  #commentconsole.log(divDomChild[3].nodeName);//  P  元素节点的名称就是大写的标签名称console.log(attrs[0].nodeName);//class// 3、节点值 nodeValueconsole.log(divDomChild[0].nodeValue);console.log(divDomChild[1].nodeValue);console.log(divDomChild[3].nodeValue);console.log(attrs[0].nodeValue);
</script>

节点获取

获取节点

基础布局

<ul class="main"><li>谢晨雨在线征婚</li><li class="lz">张奥</li><li>江佳佳</li>
</ul>

childNodes（记忆）

var ulDom = document.querySelector('ul');
//1、获取到所有子节点
console.log(ulDom.childNodes);

attributes(记忆)

var ulDom = document.querySelector('ul');
// 2、获取到所有的属性节点  属性节点与元素节点不是父子关系
console.log(ulDom.attributes)

firstChild

var ulDom = document.querySelector('ul');
// 3、firstChild 获取到第一个子节点console.log(ulDom.firstChild)

lastChild

var ulDom = document.querySelector('ul');
// 4、lastChild 获取到最后一个子节点console.log(ulDom.lastChild);

nextSibling

var ulDom = document.querySelector('ul');
// 5、nextSibling 下一个节点// 只要返回的是节点对象 就可以继续向下寻找console.log(ulDom.firstChild.nextSibling.nextSibling.nextSibling)

previousSibling

// 6、previousSibling 上一个节点
console.log(document.querySelector('.lz').previousSibling.previousSibling);

parentElement(记忆)

// 7、parentElement 获取到父级节点console.log(document.querySelector('.lz').parentElement)console.log(document.querySelector('.lz').parentNode)

获取子元素节点

children(记忆)

<ul><li>富婆通讯录</li><li>如何让富婆爱上我</li><li>取悦富婆的方法</li>
</ul>
<script>var ulDom = document.querySelector('ul');// 所有的子元素节点console.log(ulDom.children);// firstElementChild 获取第一个子元素节点console.log(ulDom.firstElementChild);// lastElementChild 获取最后一个子元素节点console.log(ulDom.lastElementChild);// nextElementSibling下一个兄弟元素节点console.log(ulDom.firstElementChild.nextElementSibling);console.log(ulDom.firstElementChild.nextElementSibling.previousElementSibling)
</script>

创建节点

<div class="app"></div>
<button>添加元素</button>
<script>document.querySelector('button').onclick = function(){// 1、创建元素节点a 标签  createElement 可以创建元素节点参数就是节点名称var aDom = document.createElement('a');// 2、创建属性节点var hrefAttr = document.createAttribute('href');// 3、设置属性节点的值hrefAttr.nodeValue = 'http://baidu.com';// 4、设置属性节点修饰元素节点aDom.setAttributeNode(hrefAttr)// 5、创建文本节点  createTextNode创建文本节点var textNode = document.createTextNode('百度');// 6、将文本节点设置为a元素节点的子节点aDom.appendChild(textNode);// 7、将a元素节点设置到dom树上document.querySelector('.app').appendChild(aDom)// document.querySelector('.app').innerHTML = '<a href="http://baidu.com">百度</a>';// 需要记忆createElement  该方法返回的是dom对象 后期可以按照dom的方式进行操作}
</script>

插入节点

1、语法格式

1、dom对象.appendChild(dom对象)appendChild表示添加子元素 调用的dom对象一定是父级元素 参数表示要加入的dom对象
2、dom对象insertBefore()表示将dom对象加入到哪一个元素的前面，调用的dom对象一定是父级元素

2、使用示例

<p>p标签的内容</p><div id="app"><div class="one">内容</div>
</div>
<script>// 1、appendChild// var aDom = document.createElement('a');// aDom.innerHTML = '百度';// aDom.setAttribute('href','http://baidu.com');// document.querySelector('#app').appendChild(aDom)// 如果添加的元素是页面上已经存在的 自动做剪切// document.querySelector('#app').appendChild(document.querySelector('p'))// 2、insertBefore 作用与appendChild 一样 但是是加入到指定元素的前面  父元素dom对象.insertBefore(加入的元素，加入的位置)var aDom = document.createElement('a');aDom.innerHTML = '百度';aDom.setAttribute('href','http://baidu.com');document.querySelector('#app').insertBefore(aDom,document.querySelector('.one'))
</script>

3、使用节点实现添加表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table,table tr th, table tr td { border:1px solid #0094ff; }</style>
</head>
<body><div><input type="text" id="username" /><input type="radio" id="sexOne"  name="sex" value="男"/>男<input type="radio" id="sexTwo" checked name="sex" value="女"/>女<input type="text" id="age" /><button id="add">添加</button></div><br/><table cellspacing="0" border="1" width="600px" ><tr><td>姓名</td><td>性别</td><td>年龄</td></tr></table><script>//页面上输入用户的姓名、性别、年龄 确认后 列表的方式显示添加的数据document.querySelector('#add').onclick = function(){// 获取到页面上输入内容var username = document.querySelector('#username').value;// 获取性别  input[name="sex"]:checked 从所有input中先筛选name值为sex 并且有checked属性的inputvar sex = document.querySelector('input[name="sex"]:checked').value;var age = document.querySelector('#age').value;// 创建tr节点var trDom = document.createElement('tr');// 创建td节点var usernameDom = document.createElement('td');usernameDom.innerHTML = username;// 将td节点加入到tr中trDom.appendChild(usernameDom);var sexDom = document.createElement('td');sexDom.innerHTML = sex;trDom.appendChild(sexDom);var ageDom = document.createElement('td');ageDom.innerHTML = age;trDom.appendChild(ageDom);document.querySelector('tbody').appendChild(trDom)}</script>
</body>
</html>

替换节点

1、语法

父元素的dom对象.replaceChild(新的dom对象,被替换的dom对象)