文档章节

JavaScript节点

烧肉啊
 烧肉啊
发布于 2015/12/16 13:58
字数 1117
阅读 10
收藏 0
点赞 0
评论 0

 JavaScript节点

DOM:

document object model(文档对象模型)。

D:文档,xml文档和html文档

O:对象,document对象的属性和方法

M:模型

DOM是针对xmlhtml)的基于树的API

DOM树:节点(node)的层次

DOM把一个文档表示为一颗家族树,即父亲,兄弟,儿子;DOM定义了node的接口以及许多种节点类型来表示xml节点的多个方面

节点(node)

    根据DOMhtml(xml)文档的每个成分都是节点,整个文档是一个文档节点,每个HTML元素是元素节点,包含在HTML元素中的文本就是文本节点,每个HTML属性就是属性节点,注释是注释节点

    节点彼此都是等级关系,HTML文档中的节点组成了节点树,文档中的每个元素,属性,文本都是这个树中的一个节点,树起始于文档节点,并由此继续伸展纸条,直至处于这棵树的最底层为止,如图所示:

元素节点:每个HTML标签都是元素节点

文本节点:标签中的文字是文本节点

属性节点:标签的属性是属性节点

    重点API

1.getElementById()

1)查询给定ID属性值的元素,返回该元素的元素节点,也是元素对象

2)因为在一个HTMLID的值是唯一的,所以返回值也是唯一的,所以方法名为getElementById(),而不是getElementsById();

3)该方法只能用于document对象,就像Javastatic对象

2.getElementsByName()

1)查找给定name属性的所有元素,这个方法将会返回一个节点集合,也称为对象集合

2)这个集合可以作为一个数组来对待,length属性的值表示的集合的个数

3)因为在htmlname不能作为唯一确定的元素,所以方法的名称为getElementsByName(),而不是getElementByName();

3.getElementsByTagName();

1)查询给定标签的所有元素

2)在html中,标签名不是唯一的,所以返回的是节点的集合

3)这个集合可以当作节点来处理,length属性表示这个集合的个数

4)可以有两种形式来执行这个方法:

    --- 1  var elements = document.getElementsByTagName();

    ---2   var elements = element.getElementsByTagName();

   从这两个方法里可以看出持有这个方法的不一定是整个文档对象,也可以是元素节点

4、hasChildNodes();

1)这个方法用来判断这个元素是否含有子节点

2)返回值是truefalse

3)因为文本节点和属性节点不可能有子节点,所以返回值永远为false

4)如果 hasChildNodes()false,则childNodes,firstChild,lastChild将返回空数组或者空字符串

5nodeName

1)文档中每一个节点都会有这个属性

2)为给定节点的名称

3)如果节点是属性节点,nodeName返回的是属性名称,如果节点是元素节点,则返回的是元素名称,如果节点是文本节点,则返回的是#text的字符串

6nodeType

该节点表明的是节点类型 ,返回值是一个整数

元素节点类型的返回值是1,属性节点的返回值是2,文本节点的值是3

7、nodeValue

1)返回给定点的当前值(字符串)

2)如果给定节点是属性节点,返回值是这个属性的值,如果给定节点是文本节点,返回值是文本节点的内容,如果给定节点是元素节点,返回值是null

3)nodeValue是一个读写属性

8replaceChild()

1)把一个给定元素里的一个子节点替换为另外一个子节点

2var reference = element.replaceChild(newChild,oldChild);

返回值指向已经被替换掉的那个子节点的引用

9、getAttribute()

1)返回一个给定元素的给定属性的节点值

2)Var attributeValue = element.getAttribuate(attributeName);

3)给定属性的名字必须以字符串的形式传递给该方法

4)给定属性的值将以字符串的形式返回

10、setAttribute()

1)将给定元素添加到一个新的属性或改变它现有的值

2element.setAttribute(attributeName,attributeValue);

    3)属性的名字和值必须以字符串的形式传递

    4)如果这个属性已经存在,那么值将被attributeValue取代

    5)如果这个属性不存在,那么先创建它,再给他赋值

© 著作权归作者所有

共有 人打赏支持
烧肉啊
粉丝 0
博文 15
码字总数 11317
作品 0
丽水
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo ⋅ 04/23 ⋅ 0

第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt ⋅ 06/05 ⋅ 0

【Vue】源码分析--vdom与html的相互转换

简析 vdom是由js对象节点组成的一个树状结构,通过diff算法对比js对象节点来更新,最后映射到原生的dom中 一个简单的dom结构 对应到js对象节点就是 代码实现 index.html vNode.js Github htt...

ns2250225 ⋅ 03/13 ⋅ 0

Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素(转)

var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode; //得到s的父节点var ns=s.nextSbiling; //获得s的下一个兄弟节点var ps=s.previousSbiling; //得到s的上一个兄弟节点v...

easonjim ⋅ 2017/01/04 ⋅ 0

JavaScript开发区块链只需200行代码

JavaScript开发一个简单的区块链只需200行代码。通过JavaScript的开发实现过程,你将理解区块链是什么:区块链就是一个分布式数据库,存储结构是一个不断增长的链表,链表中包含着许多有序的...

hahajin ⋅ 05/14 ⋅ 0

Atom飞行手册翻译: 4.3 作用域设置、作用域和作用域描述符

作用域设置、作用域和作用域描述符 Atom支持语言特定的设置。你可以在Markdown文件中软换行,或者在Python中把tab的宽度设置为4。 语言特定的设置只是一些东西的子集,我们把它叫做“作用域设...

apachecn_飞龙 ⋅ 2015/08/07 ⋅ 0

深入了解React.js的JSX

JSX 是React 为JavaScript 语法带来的可选扩展,用于在JavaScript 代码中编写声明式XML 风格语法。 对于Web 项目而言,React 的JSX 提供了一组类似于HTML 的XML 标签,但在其他使用场景中,会...

紫霞等了至尊宝五百年 ⋅ 06/01 ⋅ 0

编译型 JavaScript 模板引擎 - PowJS

PowJS PowJS 是一个编译型 Real-DOM 模板引擎 工作在浏览器环境, 直接在 DOM Tree 上编译, 渲染. DOM Tree 就是模板. 采用原生 JavaScript 语法, 指令与 JavaScript 语句一一对应 单节点的 ...

喻恒春 ⋅ 2017/10/02 ⋅ 0

细谈在HTML中使用JavaScript

细谈在HTML中使用JavaScript 前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果 JavaScript代码嵌...

幸运券发放 ⋅ 05/25 ⋅ 0

优化Visual Studio Code的自动补全

Visual Studio Code (简称VS Code)是个很棒的代码编辑器,内置多种语言的自动补全功能,写JavaScript也不例外,VS Code提供的自动补全还是很赞的。 不过自动补全功能在有些情况下会失效,比...

切糕糕 ⋅ 06/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Docker Swarm的前世今生

概述 在我的《Docker Swarm集群初探》一文中,我们实际体验了Docker Swarm容器集群技术的魅力,与《Kubernetes实践录》一文中提到的Kubernetes集群技术相比,Docker Swarm没有Kubernetes显得...

CodeSheep ⋅ 今天 ⋅ 0

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 今天 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部