掌握基础JS技能
1、 用Sublime Text2编写HTML文档
2、 文档相关操作方法介绍
3、 通过 getElementById() 可获取具有指定 ID 的首个元素的引用；getElementsByName() 返回文档中所有具有指定名称的元素集合；而 getElementsByTagName() 则返回所有拥有特定标签名的元素组成的集合。这些方法常用于网页中查找和操作 DOM 元素，是 JavaScript 操作页面内容的重要手段。
4、 内容：
5、 网页代码采用标准的HTML结构，起始部分定义了文档类型为HTML，并创建了一个完整的网页框架。在头部区域中，通过meta标签设置了字符编码为UTF-8，确保页面能够正确显示中文及其他多语言字符。同时，在head部分嵌入了一段JavaScript脚本，用于实现对页面元素的动态操作。
6、 该脚本的核心是一个名为changeLink的函数，其功能是通过DOM（文档对象模型）方法获取页面中的特定元素并对其进行修改。函数内部首先使用document.getElementById方法，根据指定的IDmyAnchor来定位页面中的一个超链接元素。原始代码中对该链接的文本内容、跳转地址以及打开方式进行了注释处理，包括尝试更改链接文字为22、替换整个HTML标签、更新链接目标为http://www.w3school.com.cn以及设置链接在新窗口打开等操作，但这些修改均被注释并未实际执行。
7、 随后，脚本进入信息输出阶段。程序将获取到的锚点元素赋值给变量myAnch，并通过多次调用alert弹窗函数来展示不同层级的DOM内容。例如，分别查看该链接的innerHTML（即标签内的文本内容）、outerHTML（包含标签本身的整体结构），以验证元素当前的状态。接着，尝试访问document对象的innerHTML与outerHTML属性，结果显示为undefined，这是因为document对象本身不支持直接读取整体HTML内容。
8、 进一步地，脚本转向body元素，调用document.body.innerHTML来获取标签内所有子元素的HTML代码，返回结果包含了原有的超链接和按钮控件的完整标记。而使用document.body.outerHTML则会连同body标签自身一并输出，形成更完整的结构描述。值得注意的是，尝试访问document.html.innerHTML或document.html.outerHTML的操作无法获得有效数据，因为DOM中并不存在名为html的直接属性。
9、 在主函数中采用了getElementsByTagName方法，传入标签名html，意图获取整个HTML文档的根元素。然而，由于该方法返回的是一个类数组集合而非单个元素，直接访问其innerHTML属性会导致结果为undefined。正确的做法应是通过索引选取集合中的第一个元素，即document.getElementsByTagName(html).innerHTML，方可成功提取从开始的全部页面内容，涵盖head部分的元信息与script定义，以及body中的交互组件。
10、 页面主体部分由两个可见元素构成：一个是带有IDmyAnchor的超链接，初始显示文本为微软，指向微软官网；另一个是普通按钮，其点击事件绑定了前述的changeLink函数。当用户点击该按钮时，浏览器将执行脚本中的逻辑，触发一系列DOM查询与信息反馈操作，尽管当前版本并未真正改变链接行为，但已具备充分的调试能力，便于开发者观察和测试页面结构的变化过程。
11、 整体而言，这段代码展示了前端开发中常见的DOM操作技术，涉及元素选取、属性修改、内容读取及用户交互响应等多个方面，适用于学习和理解JavaScript如何与HTML文档进行动态交互。通过此类实践，可以深入掌握网页内容的运行时控制机制，为进一步构建复杂的交互式应用打下基础。
12、 打开网页，点击按钮，查看结果。
