没有合适的资源？快使用搜索试试~ 我知道了~

文库首页开发技术Web开发网易云课堂之DOM编程艺术（原创带心得）

网易云课堂之DOM编程艺术（原创带心得）

DOM编程艺术

5星 · 超过95%的资源需积分: 0 17 下载量 47 浏览量 2016-08-03 22:24:34 上传评论收藏 8.46MB DOCX 举报

温馨提示

试读

64页

借鉴网易云课堂视频内容缩写，全部经自己验证再创造，非抄袭。内有自己实践写的各种代码

资源推荐

资源详情

资源评论

（）子结点和兄弟结点

.rstElementChild

第一个子元素结点（是子中第一有标签的元素，如果单纯的文字是

不算的。

例如 div.rstElementChild

.lastElementChild

最后一个，同上

.nextElementSibling

下一个兄弟元素结点

.previousElementSibling

上一个兄弟元素结点

低版本 IE 浏览器不兼容的解决方案：

1. functionchildren(element){

2. if(!element.children){//不支持 element.children

3. variNodes =element.childNodes;

4. varresult=newArray;

5. for(vari = 0; i < iNodes.length; i++){

6. if(iNodes[i].nodeType == 1)//判断是否为元素节点

7. result.push(iNodes[i]);

8. }

9. returnresult;

10. }

11. else

12. returnelement.children;

13. }

（）选择器

① 注意：单纯这样的代码的话，需要写在<body>标签的最后（准

确的说，是其指向的 dom 结点的最后），否则可能无法获取到结点。

 选择器：

getElementById("")

通常是 document. getElementById("")

标签选择器：

getElementByTagName("");

例如：getElementById("li");获取的是一个数组，在调用其的

DOM 对象的范围内。注意，需要加双引号括起来

动态的：如果 DOM 树变化（例如减少了一个结点），其值也会跟

着变化

var b = .getElementsByTagName('form')[0];

var c = .getElementsByTagName('form')[0][0];

b.removeChild(c);

.dir(b);

 选择器：

getElementByName("");

和上面的区别是没有 Tag。具体例如：

HTML：

<>账号：</><type="text"

name="account"/><>

JS：

.getElementsByName('account');

 选择器：（ 不支持）

getElementByClassName("");

获取的是一个数组，参数可以传多个 class 名。

关于兼容性设置：

function getElementsByClassName(root, className) {

if (root.getElementsByClassName) {

return root.getElementsByClassName(className);

} else {

var elements = root.getElementsByTagName('*');

var results = [];

for (var i = 0, element; element = elements[i]; i++) {

if (hasClassName(element, className)) {

result.push(element);

}

return result;

}

：（、 不支持， 部分支持）

获取第一个符合的元素/获取所有的；

例如：

HTML：

< id="yourForm">

<>账号：</><type="text" class="test"

name="account"/><>

<>密码：</><type="password"

class="test" name="password"/><>

</ >

JS：

var b = .querySelector('.test');

.dir(b);

输出：

input.test

具体查看后，指第一个 input

var b = .querySelectorAll('.test');

.dir(b);

输出：

NodeList[2]

即两个 input 都获取

非动态的：DOM 结点改变后其值不会变

②

!"#$ 创建结点，标签名就是

#

例如：

var node = .createElement("div");

!%& 结点的文本内容（' 和以下不支持）

!(% 同上，但 ) % 不支持

因此假如要做兼容，可以重构函数，进行判断，如果支持

innerText 则用 innerText，如果不支持，返回 textContent

剩余63页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

C_ai_yu

2018-08-01

非常棒，对我有用

qq20004604

粉丝: 1116
资源: 19

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

网易云课堂之DOM编程艺术（原创带心得）

经典之作javascript dom编程艺术源码

JavaScript DOM编程艺术.pdf

JavaScript Dom编程艺术

javaScript-DOM编程艺术

JavaScriptDOM编程艺术（第2版）PDF版本下载.txt

JavaScript.DOM编程艺术(第2版)附录及源码.rar

js+dom编程艺术资源

DOM编程艺术 书+源码

JavaScript_DOM编程艺术第二版（中文）

JavaScript DOM编程艺术【第2版&高清】.pdf

JSDOM编程艺术代码.7z

JavaScript+DOM编程艺术.pdf

JavaScriptDom编程艺术

JavaScript DOM编程艺术

JavaScript+DOM编程艺术（清晰中文版）.pdf

JavaScript.DOM编程艺术(第2版) 2-4

《JavaScript DOM编程艺术 第2版》.txt

JavaScript DOM 编程艺术（含源码）

JavaScript DOM编程艺术(中文第2版)

微信小程序源码-合集6.rar

微信小程序源码-合集5.rar

微信小程序源码-合集4.rar

微信小程序源码-合集3.rar

微信小程序源码-合集2.rar

浏览器插件 Auto Refresh Plus 7.4.4 ctx

品优购项目 素材及代码

学生宿舍管理系统源码文件

全能电子地图下载器1.9.5完善版.zip

大学生网页设计大作业-5个网页设计制作作品自己任选

最新资源

DOM编程艺术书+源码

《JavaScript DOM编程艺术第2版》.txt

品优购项目素材及代码