javascript——10章 DOM
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的更多相关文章
- Javascript高级程序设计读书笔记(第10章 DOM)
第10章 DOM 10.1 节点层次 每个节点都有一个nodeType属性,用于表明节点的类型.任何节点类型必是下面中的一个: Node.Element_NODE(1); NODE.ATTRIBUT ...
- 第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 ...
- 第10章DOM笔记
第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a) app ...
- javascript高级程序设计第3版——第10章 DOM
第十章,DOM DOM是语言中立的API,用于访问和操作HTML 和XML 文档.DOM1 级将HTML 和XML 文档形象地看作一个层次化的节点树,可以使用JavaScript 来操作这个节点树,进 ...
- JavaScript高级程序设计(第三版)学习笔记8、9、10章
第8章,BOM BOM的核心对象是window,具有双重角色,既是js访问浏览器的一个接口,又是ECMAScript规定的Global对象.因此,在全局作用域中声明的函数.变量都会变成window对象 ...
- 10.2 DOM 操作技术【JavaScript高级程序设计第三版】
很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...
- JavaScript进阶 - 第9章 DOM对象,控制HTML元素
第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...
- 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
随机推荐
- [转]通过Spring Boot三分钟创建Spring Web项目
来源:https://www.tianmaying.com/tutorial/project-based-on-spring-boot Spring Boot简介 接下来我们所有的Spring代码实例 ...
- python函数式编程——返回函数
1.函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 2.闭包 注意到返回的函数在其定义内部引用了局部变量args,所以,当一个函数返回了一个函数后,其内部的局部变量还 ...
- 经典的XSS案例
在做安全审计的时候,通过常用的<script>alert(1)</script>无法发现该XSS
- tasksetCPU亲和力&docke容器资源限制
[taskset详解] taskset设置cpu亲和力,taskset能够将一个或者多个进程绑定到一个或者多个处理器上运行 参数: 选项: -a, --all-tasks 在给定 pid 的所有任务( ...
- Docker镜像、容器剖析
我们通常所说的docker是什么? 在这里英文本意为“搬运工”这里指的的docker搬运点的是集装箱,集装箱装的是够任意类型的APP,开发者通过Docker可以将app变成一种标准化,可移植的.自管理 ...
- 移动端iscroll实现日期选择
哎,说多了都是泪: 引入相关JS文件 <script type="text/javascript" src="js/jquery-1.9.1.min.js" ...
- Vue2.0学习——axios用法详解
功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 自动转换 JSON 数据 客 ...
- day 54 jQuery, part-1
上节内容回顾: 1. 前情回顾 1. DOM对象和BOM对象 1. BOM 对象 --> window location location.href location.href="ht ...
- React前端框架路由跳转,前端回车事件、禁止空格、提交方式等方法
react router - historyhistory.push() 方法用于在JS中实现页面跳转history.go(-1) 用来实现页面的前进(1)和后退(-1) 访问js连接后+?v1清缓存 ...
- DDL DML概念 --- Msysql常用命令
一.DML DML(data manipulation language)数据操纵语言: 就是我们最经常用到的 SELECT.UPDATE.INSERT.DELETE. 主要用来对数据库的数据进行一些 ...