前端JS知识要点总结（6）

来源：互联网发布：mac 安装dmg到user 编辑：程序博客网时间：2024/05/21 23:00

JS-web-API

JS的基础语法是基于ECMA262的标准的，而JS-web-API是W3C标准，这是专门用于浏览器的JS语法标准，其中包括了DOM操作，BOM操作，事件绑定，ajax请求，http协议，存储。没有包括任何JS基础语法相关的内容，只定义了用于浏览器中JS操作页面的API和全局变量，如window等。

因此，如果将JS-web-API考虑进去之后，内置的全局函数和对象包括以下内容：
Object, Array, Boolean, String, Number, Math, JSON, Date, Function, RegExp, Error
window, document
navigator.userAgent

node.js的标准不包括W3C，因为W3C是关于浏览器中的JS的标准。

DOM

Document Object Model

知识点：

DOM本质
DOM节点
DOM结构

题目二十：DOM是哪种基本的数据结构？

树

常说：DOM树

题目二十一：DOM操作常用的API有哪些？

获取DOM节点，以及节点的property和Attribute
获取父/子节点
新增/删除节点

DOM节点操作：

document.getElementById('')         // only onedocument.getElementsByClassName('') // set(集合)document.getElementsByTagName('')   // setdocument.querySelectorAll('')       // set

DOM结构操作:

document.createElement('')document.appendChild('')document.parentElement('')          // only onedocument.childNodes('')             // set

用法举例：

var p = document.createElement('p')p.innerHTML = 'new p'var div1 = document.getElementById('div1')div1.appendChild(p)

另外说明，假如上面代码中的变量p是文档结构中存在的某个元素，当它被append到其它节点上时，它是被移动过去的，而不是复制过去的！

陷阱或者使用时的注意事项：

<div id="div1">    <p id="p1">p1</p>    <p id="p2">p2</p></div>

var div1 = getElementById('div1')console.log(div1.childNodes)// output输出结果如下[text, p1, text, p2, text]

上面的输出结果中有多个text，这是因为html中的换行符也是内容，也将其识别为子节点了。通过下面的方法可以将其区分出来：

childNodes[i].nodeType == 3     // textchildNodes[i].nodeType == 1     // p

题目二十二：DOM节点的attr和property有何区别？

property 用于对一个JS对象的属性进行获取和修改，当创建一个DOM节点时，一部分属性会直接以对象的属性的形式创建在这个节点上，这部分节点可以以property形式获取，例如：

div1.id     // "div1"

Attribute 特指对于html标签的获取和修改，因为有些属性不仅仅会在对象中创建，而且无法通过对象属性的方式获取，这时候就需要用attribute的方式来进行操作。

var div1 = document.getElementById("div1")div1.getAttribute("id")     // div1// 常用的有getAttribute()setAttribute()removeAttribute()

下面给出一个总结的例子（精简了html的内容）：

<!DOCTYPE html><html lang="en"><head>    <title>Document</title></head><body>    <div id="container" gameId=123>this is div1</div>    <script>        var div1 = document.getElementById("container")        console.log(div1.id)        console.log(div1.gameId)        console.log(div1.getAttribute("id"))        console.log(div1.getAttribute("gameId"))    </script></body></html>

上面的代码输出结果如下

containerundefinedcontainer123

稍微总结一下就是，普通的属性，可以直接通过property的方式来访问，而其他自己定义的属性就要通过Attribute的方式来访问，Attribute特指的就是标签中的所有的属性，包括自己定义的。

更加详细的说明可以参考下面这篇文章：

http://www.jb51.net/article/50686.htm

阅读全文

0 0