第8章 充实文档的内容

不应该做什么

编写js判断要始终遵循下面原则

1. 渐进增强（代码可以维护，可扩展）
2. 平稳退化（保障代码的健壮性）

---

把“不可见”变成“可见”

如果把某个元素的display属性设置为none，甚至可以让它根本不出现在浏览器窗口里，这个元素仍是DOM节点树的组成部分，只是浏览器不显示它们而已。

---

内容

HTML和XHTML的区别

1. HTML不区分大小写，XHTML区分大小写
2. HTML元素标签可以不用闭合，XHTML必须有闭合

attr标签在有些游览器上鼠标移上去显示title内容

    ZS
    LS
    WW

---

显示“缩略语列表”

动态创建html元素结构

1. 遍历这份文档中的所有abbr元素。
2. 保存每个abbr元素的title属性。
3. 保存每个abbr元素包含的文本。
4. 创建一个“定义列表”元素（即dl元素）。
5. 遍历刚才保存的title属性和abbr元素的文本。
6. 创建一个“定义标题”元素（即dt元素）。
7. 把abbr元素的文本插入到这个dt元素。
8. 创建一个“定义描述”元素（即dd元素）。
9. 把title属性插入到这个dd元素。
10. 把dt元素追加到第4步创建的dl元素上。
11. 把dd元素追加到第4步创建的dl元素上。
12. 把dl元素追加到explanation.html文档的body元素上。

  
ZS
  
zhang san
  
LS
  
li si
  
WW
  
wang wu

编写displayAbbreviations函数

function displayAbbreviations() {
	
	// 获取所有attr的title和文本内容并且存放到arr数组中
    let attrs = document.getElementsByTagName("attr")
    if (attrs.length < 1) return false;
    attrs = Array.from(attrs)

    const arr = []
    attrs.forEach((item) => {
        const title = item.getAttribute("title")
        const text = item.firstChild.nodeValue
        arr.push({
            title,
            text
        })
    })
}

创建标记

function displayAbbreviations() {
   let attrs = document.getElementsByTagName("attr")
   if (attrs.length < 1) return false;
   attrs = Array.from(attrs)

   const arr = []
   attrs.forEach((item) => {
       const title = item.getAttribute("title")
       const text = item.firstChild.nodeValue
       arr.push({
           title,
           text
       })
   })
	// 创建dom并且加入到body元素下
   const dl=document.createElement("dl");
   arr.forEach((item)=>{
       const dt=document.createElement("dt");
       const dd=document.createElement("dd");
       const dt_text=document.createTextNode(item.text);
       const dd_text=document.createTextNode(item.title);
       dt.appendChild(dt_text);
       dd.appendChild(dd_text);

       dl.appendChild(dt);
       dl.appendChild(dd);

       document.body.appendChild(dl)
   })
}

显示“文献来源链接表”

blockquote 标签的cite的作用主要是告诉用户文字参考来源但是有些游览器会忽略到这个属性，我们可以通过js的方式让他显示出来

	

	    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident necessitatibus harum animi reprehenderit
	    facere officia aut, corporis velit iusto itaque dolores molestias perferendis accusantium, temporibus fuga
	    fugiat nostrum illo in.
	

实践

   function displayCitations(){
       // 获取cite链接
       const blockquote=document.getElementById("blockquote")
       const url=blockquote.getAttribute("cite");
       // 创建链接
       const a=document.createElement("a");
       const a_text=document.createTextNode("scorce")
       a.appendChild(a_text)
       a.setAttribute("href",url);
       // 加入blockquote下第一个元素后
       blockquote.firstElementChild.appendChild(a)
   }

---

显示“快捷键清单”

将a标签中的accesskey属性值显示到a标签前

    按1跳转


    按2跳转


    按3跳转

实践

function show_Key() {
    let as = document.getElementsByTagName("a");
    as = Array.from(as);

    as.forEach((item) => {
        if (item.getAttribute("accesskey")) {
            const accesskey = item.getAttribute("accesskey")
            const span = document.createElement("span");
            const span_text = document.createTextNode(accesskey);
            span.appendChild(span_text);
            const a_div=item.parentElement
            a_div.insertBefore(span,a_div.children[0])
        }
    })
}

---

方法总结

1. getElementById() 根据id获取唯一元素
2. getElementsByTagName() 根据元素名获取伪数组（需要Array.from()转换为真数组才能使用数组的其他方法）
3. getAttribute() 获取元素的属性值
4. setAttribute() 设置元素的属性值（有则覆盖，无责添加）
5. createElement() 创建一个元素节点
6. createTextNode() 创建一个文本节点
7. appendChild() 将元素追加到父元素的最后位置
8. insertBefore() 将元素指定到某个父元素中某个元素之前
9. parentElement 获取临近父元素
10. firstElementChild 获取父元素下的首个元素节点
11. firstChild 获取父元素下首个节点