<a> 超链接

<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。
如下代码:

<a href="目标网址"(此处空格)target="_blank">click here!</a>

_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页)


HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。

当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法:

<a name="label">锚(显示在页面上的文本)</a>

提示:锚的名称可以是任何你喜欢的名字。

提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。

实例

首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

<a name="tips">基本的注意事项 - 有用的提示</a>

然后,我们在同一个文档中创建指向该锚的链接:

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接:

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。



顺着节点树获取文档元素 先给一段html代码: <body> <div id="div1"> <div class="cl1"> <p>文本</p> <a>超链接</a> </div> <div class="cl2"> <select id="se"> <option>红</option> <option>黄</option> <option>蓝</option> </select> </div> </div> </body> 首先,我们获取最外层的div节点: var div1 = document.getElementById("div1"); 然后获取它的第一个子节点(class值为cl1的节点): //firstElementChild表示第一个子节点 var cl1 = div1.firstElementChild; 再获取cl1的最后一个子节点,即a节点: //lastElementChild表示最后一个子节点 var aElement = cl1.lastElementChild; 在控制台打印出获取到的节点里面的文本: console.log(aElement.innerText); 效果如下(用浏览器打开这段代码,然后按下F12键即可): 通过这个例子可以看出,我们的思路是顺着这个节点树从根部一直往下找,即顺着箭头的方向直到目标节点。 其他一些属性 篇幅有限,这里简单说明一下其它属性,用法和上面的相同。 前一个兄弟节点 previousElementSibling表示前一个兄弟节点。比如获取上面的超链接的前一个节点p,然后在控制台打印p的内容,代码以及效果如下: var left = aElement.previousElementSibling; console.log(left.innerText); 后一个兄弟节点 nextElementSibling表示后一个兄弟节点。显然,上面的p元素的后一个兄弟节点是a元素,打印一下a的内容: var right = left.nextElementSibling; console.log(right.innerText); 子节点列表: children children[0]表示第一个子节点,以此类推。比如依次在控制台打印出上面的select标签的三个子节点: var selectTag = document.getElementById("se"); console.log(selectTag.children[0].innerText); console.log(selectTag.children[1].innerText); console.log(selectTag.children[2].innerText); 效果如下: children.length:子节点的个数; console.log(selectTag.children.length);//输出3 编程要求 本关的编程任务是补全右侧代码片段中Begin至End中间的代码,具体要求如下: 已知变量cl2为获取到的类为c12的节点; 要求获取该div内文本为黄的option标签,并赋值给变量myElement; 要求使用本关相关知识中介绍的方法。
最新发布
10-28
根据你的描述,本关要求我们**使用节点树的遍历方式(如 `firstElementChild`、`nextElementSibling` 等 DOM 层级属性)** 来获取目标元素,而不是使用 `querySelector` 或文本匹配的方式。 --- ### ✅ 题目分析 HTML 结构如下: ```html <div id="div1"> <div class="cl1"> <p>文本</p> <a>超链接</a> </div> <div class="cl2"> <select id="se"> <option>红</option> <option>黄</option> <option>蓝</option> </select> </div> </div> ``` 已知: ```js var cl2 = document.getElementById("div1").lastElementChild; // 获取 class="cl2" 的 div ``` 我们要: 👉 **获取该 div 内文本为“黄”的 `<option>` 标签**,并赋值给 `myElement`。 ⚠️ 要求:使用 **顺着节点树查找** 的方法(即使用 `children`、`firstElementChild`、`nextElementSibling` 等),不能用 `querySelector` 或遍历过滤。 --- ### ✅ 解题思路(顺着节点树) 1. `cl2` 是 `<div class="cl2">` 2. 它的唯一子元素是 `<select id="se">` → 可用 `cl2.firstElementChild` 或 `cl2.children[0]` 3. `select` 的子元素是三个 `<option>`: - 第一个:红 → `children[0]` - 第二个:黄 → `children[1]` ← 我们要找它! 所以我们可以通过: ```js cl2.firstElementChild.children[1] ``` 来获取“黄”这个 option。 --- ### ✅ 正确代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="div1"> <div class="cl1"> <p>文本</p> <a>超链接</a> </div> <div class="cl2"> <select id="se"> <option>红</option> <option>黄</option> <option>蓝</option> </select> </div> </div> <script> var cl2 = document.getElementById("div1").lastElementChild; <!-- 请在此处编写代码 --> <!---------Begin---------> var myElement = cl2.firstElementChild.children[1]; <!---------End---------> console.log(myElement.innerText); // 应输出 "黄" myElement.innerText = "绿"; // 将“黄”改为“绿” </script> </body> </html> ``` --- ### 🔍 代码解释: - `cl2.firstElementChild` → 获取 `<select>` 元素; - `.children[1]` → 获取 `<select>` 的第二个子节点(即“黄”对应的 `<option>`); - 赋值给 `myElement`; - 后续 `myElement.innerText = "绿"` 成功修改内容。 ✅ 这完全符合“顺着节点树向下查找”的要求,使用了 `firstElementChild` 和 `children` 属性。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值