文档章节

JavaScript节点

烧肉啊
 烧肉啊
发布于 2015/12/16 13:58
字数 1117
阅读 11
收藏 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)如果这个属性不存在,那么先创建它,再给他赋值

本文转载自:http://blog.csdn.net/xy849288321/article/details/7281373

共有 人打赏支持
烧肉啊
粉丝 0
博文 15
码字总数 11317
作品 0
丽水
私信 提问
JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa
06/23
0
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
09/08
0
0
写个js/css动态加载的JavaScript插件

由于现在手上项目没用到jQuery,以及希望能动态加载js/css 所以就写了动态加载的脚本 原理简介: 通过给定的url参数中js/css文件的后缀动态插件节点 通过参数绑定添加到的父级节点 绑定节点加载...

关爱单身狗
2017/01/19
0
0
dTree+jquery生成树

Dtree目录树的总结 一:函数 1:页面中 tree.add(id,pid,name,url,title,target,icon,iconOpen,open); 参数说明: id :节点自身的id pid :节点的父节点的id name :节点显示在页面上的名称...

北京_
2014/07/30
0
0
Chrome 72 开发者工具新特性

性能指标可视化 现在,在录制了一个界面的加载后,DevTools (开发者工具)会在 Timings 一栏标记出像 、First Meaningful Paint (首次意义性绘制)这类性能指标。 高亮文本节点 现在,当鼠...

西楼听雨
12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

搭建git服务器————gitlab

github毕竟是公开的,而私有仓库又得花钱买。所以我们可以想办法搭建一个私有的,只自己公司使用的。Gitlab是个不错的选择。在介绍它之前,先讲述一下命令行的git服务器 找一台服务器,首先要...

chencheng-linux
14分钟前
2
0
用Redis实现“秒杀”系统

导论 曾经被问过好多次怎样实现秒杀系统的问题。昨天又在CSDN架构师微信群被问到了。因此这里把我设想的实现秒杀系统的价格设计分享出来。供大家参考。 秒杀系统的架构设计 秒杀系统,是典型...

小刀爱编程
28分钟前
7
0
GO redis 相关操作

在gopath 目录下安装 go get github.com/garyburd/redigo/redis package mainimport ("fmt""github.com/garyburd/redigo/redis")//定义一个全局链接池变量var pool *redis.Pool//......

汤汤圆圆
今天
20
0
java8性特性,常用的lambda表达式

1、抽取多个对象中的某个属性,用数组接收 List<Student> students = new ArrayList<>(); List<String> names =students.stream().map(Student::getName).collect(Collectors.toList()); 2、......

Boss-x
今天
19
0
flutter 子组件与父组件

无论是子组件还是父组件,任何时候initState()只执行一次,如果需要判断 就在build里面进行,不然无效的。

大灰狼wow
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部