沈阳思路网站制作,镇海阿里巴巴关键词优化,怎么建设国外免费网站,wordpress判断使用模版天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。 玉阶生白露，夜久侵罗袜。 却下水晶帘，玲珑望秋月。 ——《玉阶怨》 文章目录 一、DOM操作1. D… 天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。 玉阶生白露，夜久侵罗袜。 却下水晶帘，玲珑望秋月。 ——《玉阶怨》 文章目录 一、DOM操作1. DOM介绍2. 查询操作2.1 查询方法2.2 查询示例2.2.1 根据id获取dom2.2.1.1 示例2.2.1.2 结果 2.2.2 根据tag获取dom2.2.2.1 示例2.2.2.2 结果 2.2.3 根据css样式获取dom2.2.3.1 示例2.2.3.2 结果 2.2.4 根据已有节点获取其他节点dom2.2.4.1 示例2.2.4.2 结果 2.3 查询示例代码汇总 3. 访问和修改操作3.1 访问和修改属性3.1.1 语法3.1.2 示例代码3.1.3 浏览器输出 3.2 访问和修改内容3.2.1 语法3.1.2 示例代码3.1.3 浏览器输出 3.3 访问和修改css3.3.1 语法3.3.2 示例代码3.3.3 浏览器输出 4. 添加替换操作4.1 示例代码4.2 效果展示4.2.1 添加4.2.2 指定位置添加4.2.3 替换 5. 删除操作5.1 示例代码5.2 效果演示5.2.1 remove方法删除5.2.2 removeChild方法删除 6. 趣味案例6.1 效果图6.2 搜索引擎的参数获取6.2.1 百度的参数获取6.2.2 搜狗的参数获取6.2.3 360的参数获取 6.3 示例代码6.4 效果演示 二、事件处理1. 事件简介1.1 事件的定义1.2 事件源1.3 事件对象1.4 事件监听 2. 事件的绑定2.1 静态绑定2.2 动态绑定2.3 注意事项 3. 常用事件3.1 鼠标事件3.1.1 事件列举3.1.2 示例代码3.1.2 页面展示 3.2 键盘事件3.2.1 事件列举3.2.2 示例代码3.2.3 页面效果 3.3 表单事件3.3.1 事件列举3.3.2 示例代码3.3.3 页面效果 4. 事件操作4.1 事件冒泡4.1.1 定义4.1.2 特点4.1.3 语法4.1.4 示例代码4.1.5 页面效果 4.2 事件默认行为4.2.1 定义4.2.2 语法4.2.3 示例代码4.2.4 页面效果 5. 下拉列表5.1 Select5.1.1 属性5.1.2 方法5.1.3 事件 5.2 Option5.2.1 属性5.2.2 构造函数 6. 事件处理趣味实例6.1 创建表格6.1.1 示例代码6.1.2 页面效果 6.2 创建表单6.2.1 示例代码6.2.2 页面效果 6.3 添加样式6.3.1 示例代码6.3.2 页面效果 6.4 表格中的事件绑定6.4.1 示例代码6.4.2 页面效果 6.5 表单中的事件绑定6.5.1 示例代码6.5.2 页面效果 6.6 复选框功能实现6.6.1 示例代码6.6.2 页面效果 6.7 示例代码下载 三、BOM操作四、数据校验五、示例代码下载 JS（JavaScript）入门指南 JS（JavaScript）学习专栏 一、DOM操作
1. DOM介绍
DOM全称为dom document object model 文档对象模型
dom树 浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树html文档和dom树是一一对应的 dom树被改变时，与之对应的html文档也会随之改变 当需要对html中的内容进行动态改变时，可以使用dom进行操作 dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件 树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档
2. 查询操作
查询就是获取dom对象
2.1 查询方法
查询的方法和含义如下表
方法或属性含义document.getElementById(“id”)根据id属性来查询节点，返回匹配的第一个节点document.getElementsByName(“name”)根据name属性查询，并返回所有匹配的节点集合document.getElementsByTagName(“tagName”)根据标签名来查询，返回所有匹配的节点集合documnet.querySelector(“selector”)根据css选择器来查询，返回匹配的第一个节点document.querySelectorAll(“selector”)根据css选择器来查询，返回所有匹配的节点集合parentNode属性查询当前节点的父节点previous Sibing属性查询当前节点的上一个节点nextSibing属性查询当前节点的下一个节点firstChild属性查询当前节点的第一个子节点lastChild属性查询当前节点的最后一个子节点2.2 查询示例
示例代码共分为以下几种：根据id获取dom对象、根据标签tag获取dom对象、根据css样式获取dom对象、根据已有节点获取其他节点dom对象
2.2.1 根据id获取dom
根据id获取dom对象方法：document.getElementById(“id”)
2.2.1.1 示例
示例代码如下
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titleDOM操作-查询/titlescriptfunction query(){console.log(12345);console.log("根据id获取dom对象");//根据id获取dom对象，返回单个值var objDiv = document.getElementById("d1");//获取对象的类型console.log(typeof objDiv);//打印对象console.log(objDiv);}/script
/head
bodyinput type="button" value="获取页面中的元素" onclick="query()"div id="d1" class="c"hello!/div/body
/html2.2.1.2 结果
使用浏览器打开代码，点击获取页面中的元素
浏览器控制台输出如下
2.2.2 根据tag获取dom
根据标签tag获取dom对象，示例如下
2.2.2.1 示例
示例代码如下
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titleDOM操作-查询/titlescriptfunction query(){console.log(12345);console.log("根据name获取dom对象");//根据name获取dom对象，返回数组var objDivs = document.getElementsByName("hobby");//获取对象的类型console.log(typeof objDivs);//打印对象console.log(objDivs);//遍历数组对象for(var index in objDivs){console.log(objDivs[index])}}/script
/head
bodyinput type="button" value="获取页面中的元素" onclick="query()"hobbies:input type="checkbox" value="eat" name="hobby"吃饭input type="checkbox" value="sleep" name="hobby"睡觉input type="checkbox" value="kingplay" name="hobby"打王者name: input type="text" name="username"/body
/html2.2.2.2 结果
使用浏览器打开代码，点击获取页面中的元素 浏览器控制台输出如下
2.2.3 根据css样式获取dom
通过css样式style获取dom对象
2.2.3.1 示例
示例代码如下
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titleDOM操作-查询/titlescriptfunction query(){console.log(12345);console.log("根据css选择器获取单个dom对象");//根据css选择器获取单个dom对象var objCss = document.querySelector("#d1");console.log(objCss);//根据css选择器，使用标签获取对象，只会取第一个input标签的对象var objCss2 = document.querySelector("input");console.log(objCss2);//根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象var objCss3 = document.querySelector(".c");console.log(objCss3);//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss4 = document.querySelector("p.c");console.log(objCss4);//根据css选择器获取多个dom对象//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss5 = document.querySelectorAll(".c");console.log(objCss5);}/script
/head
bodyinput type="button" value="获取页面中的元素" onclick="query()"div id="d1" class="c"hello!/divdiv id="d2" class="c"world!/divp class="c"test/p/body
/html2.2.3.2 结果
使用浏览器打开代码，点击获取页面中的元素
浏览器控制台输出如下
2.2.4 根据已有节点获取其他节点dom
根据已有节点获取其他节点的dom对象，示例如下
2.2.4.1 示例
示例代码如下
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titleDOM操作-查询/titlescriptfunction query(){console.log(12345);//根据已有节点获取其他节点var objId = document.getElementById("id-du");//获取li标签的父类标签的对象console.log(objId.parentNode);//获取指定标签的上一个同级标签console.log(objId.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling);//注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值//如果有text类型的值，则需要取两次才能取到//获取指定标签的上一个同级标签console.log(objId.previousSibling.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling.nextSibling);//获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容console.log(objId.parentNode.firstChild);//获取当前节点下子节点的最后一个节点console.log(objId.parentNode.lastChild);}/script
/head
bodyinput type="button" value="获取页面中的元素" onclick="query()"ulali id="id-li"李白/lili id="id-du"杜甫/lili王维/lili杜牧/lib/ul/body
/html2.2.4.2 结果
使用浏览器打开代码，点击获取页面中的元素
浏览器控制台输出如下
2.3 查询示例代码汇总
以上方法的示例代码如下
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titleDOM操作-查询/titlescriptfunction query(){console.log(12345);console.log("根据id获取dom对象");//根据id获取dom对象，返回单个值var objDiv = document.getElementById("d1");//获取对象的类型console.log(typeof objDiv);//打印对象console.log(objDiv);console.log("根据name获取dom对象");//根据name获取dom对象，返回数组var objDivs = document.getElementsByName("hobby");//获取对象的类型console.log(typeof objDivs);//打印对象console.log(objDivs);//遍历数组对象for(var index in objDivs){console.log(objDivs[index])}console.log("根据tag获取dom对象");//根据tag标签名获取dom对象var objIput = document.getElementsByTagName("input");for(var index in objIput){console.log(objIput[index]);}console.log("根据css选择器获取单个dom对象");//根据css选择器获取单个dom对象var objCss = document.querySelector("#d1");console.log(objCss);//根据css选择器，使用标签获取对象，只会取第一个input标签的对象var objCss2 = document.querySelector("input");console.log(objCss2);//根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象var objCss3 = document.querySelector(".c");console.log(objCss3);//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss4 = document.querySelector("p.c");console.log(objCss4);//根据css选择器获取多个dom对象//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss5 = document.querySelectorAll(".c");console.log(objCss5);//根据已有节点获取其他节点var objId = document.getElementById("id-du");//获取li标签的父类标签的对象console.log(objId.parentNode);//获取指定标签的上一个同级标签console.log(objId.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling);//注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值//如果有text类型的值，则需要取两次才能取到//获取指定标签的上一个同级标签console.log(objId.previousSibling.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling.nextSibling);//获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容console.log(objId.parentNode.firstChild);//获取当前节点下子节点的最后一个节点console.log(objId.parentNode.lastChild);}/script
/head
bodyinput type="button" value="获取页面中的元素" onclick="query()"div id="d1" class="c"hello!/divdiv id="d2" class="c"world!/divp class="c"test/phobbies:input type="checkbox" value="eat" name="hobby"吃饭input type="checkbox" value="sleep" name="hobby"睡觉input type="checkbox" value="kingplay" name="hobby"打王者name: input type="text" name="username"ulali id="id-li"李白/lili id="id-du"杜甫/lili王维/lili杜牧/lib/ul/body
/html使用浏览器打开，点击获取页面中的元素
控制台输出如下
3. 访问和修改操作
访问和修改操作包括：访问和修改属性、访问和修改内容、访问和修改样式
3.1 访问和修改属性
即获取或者设置dom对象的属性 dom对象的属性和html标签的属性几乎是一样的，一般情况下dom对象都会存在一个与对应html标签同名的属性
3.1.1 语法
访问用法如下
dom对象.属性修改用法如下
dom对象.属性=值3.1.2 示例代码
示例代码如下
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titleDOM操作-访问和修改/titlescript// 1 访问属性function getProperty(){let obj = document.getElementById("baidu");//获取超链接的href属性值console.log(obj.href);//获取超链接的target属性值console.log(obj.target);//获取指定对象的内容let objs = document.getElementById("username");console.log(objs.value);//获取指定对象的是否选中值，这里的checked返回的是false或ture，选中为truelet obj3 = document.getElementById("male");console.log(obj3.checked);//设置属性值//将超链接百度的地址修改为别的，设置后刷新页面，点访问属性然后再点链接即可跳转到新的网址obj.href = "https://blog.csdn.net/mo_sss";//将跳转规则修改为当前页面跳转obj.target = "_self";//修改性别单选值的默认选项，将男性该位默认obj3.checked = "true";}/script/head
body!-- 1 访问属性 --brbrbr!-- 定义按钮，绑定事件，点击后触发事件，执行函数 --input type="button" value="访问属性" onclick="getProperty()"br!-- hr --bra href="https://www.baidu.com" target="_blank" id="baidu"baidu/abrbrbrusername: input type="text" name="username" id="username"sex: input type="radio" name="sex" value="male" id="male"男input type="radio" name="sex" value="female" id="female" checked女brbrbr/body
/html3.1.3 浏览器输出
使用浏览器打开，点以下访问属性，可以看到默认勾选的女已经换成了男 控制台输出如下，可以看到dom对象的参数输出
3.2 访问和修改内容
即获取或设置标签中的内容 两种方式：使用innerHTML、使用innerText
3.2.1 语法
访问用法如下，将内容解析为HTML
dom对象.innerHTML或，将内容作为纯文本
dom对象.innerText修改值用法如下
dom对象.innerHTML = "内容"或
dom对象.innerText = "内容"3.1.2 示例代码
相关示例代码如下
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titleDOM操作-访问和修改/titlescript// 2 访问内容function getContent(){var obj = document.getElementById("d11");//获取指定标签的内容//获取标签内的所有内容，包括标签、空格和换行符等console.log(obj.innerHTML);//只获取标签内的文本内容console.log(obj.innerText);//设置内容//设置标签内的内容，使用innerTEXT只能设置文本内容obj.innerText = "同居长干里，两小无嫌猜。";console.log(obj.innerText);//设置标签内的内容，使用innerHTML可设置标签等特殊内容obj.innerHTML = "h2朝如青丝暮成雪/h2";console.log(obj.innerHTML);}/script/head
body!-- 2 访问内容 --brhr!-- 定义按钮，绑定事件，点击后触发事件，执行函数 --input type="button" value="访问内容" onclick="getContent()"brbrbrdiv id="d11"高堂明镜悲白发/div/body
/html3.1.3 浏览器输出
使用浏览器打开，
点一下访问内容，内容修改为
控制台输出如下
3.3 访问和修改css
即获取或设置css样式 两种方式：使用style属性、使用className属性
3.3.1 语法
访问css用法如下 使用style属性用法
dom对象.style.样式属性使用className属性用法
dom对象.className注意： 如果css属性中又短横线-，需要去掉短横线，然后将其后的单词首字母改成大写 对象标签中的class，需要使用className访问
修改css用法如下 使用style属性用法
dom对象.style.样式属性 = "值"使用className属性用法
dom对象.className = "值"3.3.2 示例代码
相关示例代码如下
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titleDOM操作-访问和修改/titlescript// 3 访问CSSfunction getStyle(){var obj = document.getElementById("d22");//获取CSS样式的宽度console.log(obj.style.width);//获取CSS样式的字体大小，这里需要注意，样式的键带短杠的需要将短杠去掉将短杠后的首字母大写console.log(obj.style.fontSize);//获取CSS样式的字体console.log(obj.style.fontFamily);//获取CSS样式的左上角的半角像素console.log(obj.style.borderTopLeftRadius);//设置CSS样式的值obj.style.background = "lightgreen";// console.log(obj.style.borderTopLeftRadius);//另一种访问CSS的方式，className方式，需要配合CSS样式标签stylevar obj2 = document.getElementById("d33");//获取标签的class值console.log(obj2.className);//设置样式标签中class属性的值，设置后，调用该函数后样式即可被修改，这里需要注意，对象没有标签中的class，需要使用className访问obj2.className = "c11";//获取CSS样式的宽度console.log(obj2.style.width);}/scriptstyle/* 原始的样式 */.ccc{background: brown;font-size: 30px;}/* 修改后的样式 在函数中调用修改样式 */.c11{width: 150px;height: 20px;background: red;font-size: 10px;}/style
/head
body!-- 3 访问css --brhr!-- 定义按钮，绑定事件，点击后触发事件，执行函数 --input type="button" value="访问CSS" onclick="getStyle()"brbrbrdiv id="d22" style="width: 1000px; height: 40px; background: lightblue; font-size: 30px; font-family: 'Courier New', Courier
