JavaScript学习

JavaScript学习核心内容总结

1. BOM与DOM关系

   BOM对象包含DOM对象，DOM是BOM的子集。BOM提供浏览器窗口控制能力，DOM专注于文档结构操作。

2. BOM核心对象

   History：操作浏览器历史记录（如history.go(-1)后退）。

   Navigator：获取浏览器信息（如navigator.userAgent）。

   Location：操作URL（如location.href跳转）。

   Screen：获取屏幕分辨率（如screen.width）。

   Window：顶层对象，提供弹框、定时器等方法。

3. Window对象方法

   弹框方式：

   alert()：确认弹框，仅含确定按钮。

   confirm()：确认/取消弹框，返回布尔值。

   prompt()：输入弹框，返回输入值或null。

   定时器：

   setTimeout(fn, delay)：延迟执行一次。

   setInterval(fn, delay)：间隔重复执行。

   页面控制：

   open()：打开新窗口（如open("

   http://baidu.com"
   )）。

   close()：关闭当前窗口。

4. Location与History操作

   Location常用属性：

   href：获取/设置完整URL。

   hostname：主机名（如

   www.example.com
   ）。

   reload()：刷新页面。

   History导航：

   history.go(n)：正数前进，负数后退（如go(-2)后退两页）。

1. DOM节点分类

   元素节点：HTML标签（如<div>）。

   文本节点：标签内的文本内容。

   属性节点：标签的属性（如class="box"）。

   

2. 节点关系

   父子关系：如head与title（head.title）。

   兄弟关系：如head与body（同级标签）。

3. DOM操作核心方法

   获取元素：

   document.getElementById("id")：通过ID获取单个元素。

   element.childNodes：获取所有子节点（含空白文本）。

   element.parentNode：获取父节点。

   操作属性：

   获取属性：

   element.attribute（如element.type）。

   element.getAttribute("attribute")（如getAttribute("class")）。

   设置属性：

   element.attribute = value（如element.type = "button"）。

   element.setAttribute("attribute", value)（如setAttribute("class", "box")）。

4. 操作样式与文本

   样式操作：

   行内样式：直接修改style属性（如div.style.width = "300px"）。

   类名修改：通过className切换CSS类（如div.className = "active"）。

   文本操作：

   innerHTML：获取/设置包含HTML标签的内容（如div.innerHTML = "<p>Hello</p>"）。

   innerText：仅获取/设置纯文本（如div.innerText = "Hello"）。

5. DOM结构操作

   添加节点：

   appendChild(node)：将节点追加到父节点末尾。

   替换节点：

   replaceChild(newNode, oldNode)：用新节点替换旧节点。

   删除节点：

   parentNode.removeChild(node)：移除指定节点。

1. 表单元素控制

   取值方式：

   select：通过value获取选中值（如select.value）。

   textarea：通过value获取文本内容（如textarea.value）。

   属性控制：

   readonly：只读，可提交数据。

   disabled：禁用，不可提交数据。

2. 表单提交方式

   自动提交：通过onsubmit事件绑定验证函数（如<form onsubmit="return validate()">）。

   手动提交：通过JavaScript触发提交（如document.form.submit()）。

1. BOM应用场景

   弹框：用户交互确认（如删除前确认）。

   定时器：轮播图自动切换、倒计时功能。

   页面跳转：根据条件重定向到不同URL。

2. DOM应用场景

   动态样式：根据用户操作切换主题（如修改className）。

   内容更新：实时显示数据（如通过innerHTML插入动态内容）。

   结构操作：动态添加/删除列表项（如appendChild添加任务）。

3. 表单应用场景

   数据验证：提交前检查输入合法性（如onsubmit拦截非法输入）。

   禁用控件：根据条件控制表单可用性（如disabled禁用按钮）。

总结：JavaScript学习需围绕BOM的浏览器控制能力和DOM的文档操作能力展开，结合表单交互实现完整前端功能。通过反复练习核心方法（如节点获取、样式修改、事件绑定）可快速掌握开发技巧。