1、节点关系

(1)childNodes:返回节点的子节点集合

返回值:NodeList 对象,表示节点集合。

注:childNodes只能取到子级,不能取到子级的子级。

childNodes所有节点有相同的父节点

每个节点相互之间是同胞节点。


(2)parentNode属性:节点的父节点

(3)previousSibling属性:节点的同胞节点第一个节点

(4)nextsibling属性:节点的同胞节点最后一个节点

(5)hasChildNodes()方法:在李点包含一个或多个子节点时返回true.

(6)ownerDocument属性:所有节点最后一个属性,表示整个文档的文档节点。


2、节点操作

(1)var fragment = document.createDocumentFragment();ul.appendChild(fragment);创建文档片段——再将节点加到“文档片段”;

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null; for (var i=0; i < 1; i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Item " + (i+1) + "111111111"));
fragment.appendChild(li);
} ul.appendChild(fragment);

(2)document.createElement  创建节点:

var div = document.createElement("div");

(2)id = "myNewDiv";  创建节点的ID名称:

div.id = "myNewDiv";

(3)className = "box"; 创建节点的class名称:

div.className = "box";

(4)document.body.appendChild(div);把节点添加到父节点:

document.body.appendChild(div);

(5)document.createTextNode("Item ");创建节点文本:

li.appendChild(document.createTextNode("Item " + (i+1) + "111111111"));

javascript——10章 DOM的更多相关文章

  1. Javascript高级程序设计读书笔记(第10章 DOM)

    第10章 DOM 10.1  节点层次 每个节点都有一个nodeType属性,用于表明节点的类型.任何节点类型必是下面中的一个: Node.Element_NODE(1); NODE.ATTRIBUT ...

  2. 第10章 DOM

    第10章 DOM 10.1 节点层次 10.1.1 Node 类型 10.1.2 Document 类型 10.1.3 Element 类型 10.1.4 Text 类型 10.1.5 Comment ...

  3. 第10章DOM笔记

    第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a)  app ...

  4. javascript高级程序设计第3版——第10章 DOM

    第十章,DOM DOM是语言中立的API,用于访问和操作HTML 和XML 文档.DOM1 级将HTML 和XML 文档形象地看作一个层次化的节点树,可以使用JavaScript 来操作这个节点树,进 ...

  5. JavaScript高级程序设计(第三版)学习笔记8、9、10章

    第8章,BOM BOM的核心对象是window,具有双重角色,既是js访问浏览器的一个接口,又是ECMAScript规定的Global对象.因此,在全局作用域中声明的函数.变量都会变成window对象 ...

  6. 10.2 DOM 操作技术【JavaScript高级程序设计第三版】

    很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...

  7. JavaScript进阶 - 第9章 DOM对象,控制HTML元素

    第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...

  8. 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

随机推荐

  1. 关于SQL Server中的系统表之一 sysobjects

    微软Sql Server数据库是企业开发管理中最常用的数据库系统之一.其功能强大而且使用简单.方便.我们在数据库中创建数据库.表.视图.触发器.存储过程.函数等信息. 最常用的功能之一,查询数据,例如 ...

  2. linux后台执行./run.py提示python syntax error near unexpected token `('

    python脚本中的#!/usr/bin/python     估计有不少人注意过一些python脚本开头有这么行东东: #!/usr/bin/python 它是用来干嘛的?貌似没有它对脚本功能也没啥 ...

  3. 实现 js 数据类型的判断函数type

    type = (obj) => { const pass1 = typeof obj if (pass1 != 'object') return pass1 const pass2 = obj ...

  4. Codeforces 1017F The Neutral Zone 数论

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1017F.html 题目传送门 - CF1017F 题意 假设一个数 $x$ 分解质因数后得到结果 $x=p ...

  5. python面试题之python下多线程的限制

    python多线程有个全局解释器锁(global interpreter lock). 这个锁的意思是任一时间只能有一个线程使用解释器,跟单cpu跑多个程序一个意思,大家都是轮着用的,这叫“并发”,不 ...

  6. 《Thinking In Java》阅读笔记

    <Thinking In Java>阅读笔记 前四章:对象导论. 一切都是对象. 操作符. 控制执行流程 public在一个文件中只能有一个,可以是一个类class或者一个接口interf ...

  7. 浪里个浪 FZU - 2261

    TonyY是一个喜欢到处浪的男人,他的梦想是带着兰兰姐姐浪遍天朝的各个角落,不过在此之前,他需要做好规划. 现在他的手上有一份天朝地图,上面有n个城市,m条交通路径,每条交通路径都是单行道.他已经预先 ...

  8. 001.Linux开机启动过程

    相关Linux启动过程解析,此作为通用启动参考:

  9. js小函数工具

    突然想到建一片文章关于自己所学到的一些小函数,今后需要的时候可以直接当工具使用. 1.获取当前时间小程序. function showTime(){ var show_day=new Array('星 ...

  10. ES搜索社区

    好问题 1.比如我要索引的条目为“33分钟侦探”,我想在用户输入“3”.“33”.“三三”.“三十三”.“三十三分钟”等的情况下都命中该条目,请问有没有什么好的方式实现? PS:使用的是ansj分词器 ...