JavaScript的DOM(文档对象)基础语法总结2
1、getAttribute()方法,通过元素节点的属性名称获取属性的值。
//语法
elementNode.getAttribute(name)
//element(元素);Node(节点)
//注意:1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。2. name:要想查询的元素节点的属性名字
//例子
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=; i< con.length;i++){
var text=con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
//使用getAttribute()方法,获取LI标签的title值
2、setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
//语法
elementNode.setAttribute(name,value)
//说明:1)name: 要设置的属性名。2)value: 要设置的属性值。3)把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。4)类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。 //例子
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时,新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++){
var text=Lists[i].getAttribute("title");
document.write(text +"<br>");
if(text==""){
Lists[i].setAttribute("title","前端技术");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
//用getAttribute()方法获取元素属性值,保存在变量text。
//使用setAttribute()方法设置title属性值。
3、节点属性
DOM 节点有三个重要的属性 :
1) nodeName : 节点的名称;
①元素节点的 nodeName 与标签名相同
②属性节点的 nodeName 是属性的名称
③文本节点的 nodeName 永远是 #text
④文档节点的 nodeName 永远是 #document
2) nodeValue :节点的值;
①元素节点的 nodeValue 是 undefined 或 null
②文本节点的 nodeValue 是文本自身
③属性节点的 nodeValue 是属性的值
3)nodeType :节点的类型,是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
//例子 <ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var li=document.getElementsByTagName("li");
for(var i=;i<li.length;i++){
document.write("第"+i+"个节点的名称是"+li[i].nodeName+"<br />");
document.write("第"+i+"个节点的值是"+li[i].nodeValue+"<br />");
document.write("第"+i+"个节点的类型是"+li[i].nodeType+"<br />");
}
</script>
//获取所有LI标签,并输出相应节点的名称、节点的值、节点的类型。
4、子结点childNodes,访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
注意:如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。
例子如下:
运行的结果如下:
IE:
UL子节点个数:3
节点类型:1
其它浏览器:
UL子节点个数:7
节点类型:3
注意:1)IE全系列、firefox、chrome、opera、safari兼容问题; 2)节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7.
如下图:
1)firstChild
属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。
2)lastChild
属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.lastChild
说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
5、父节点parentNode
//访问父节点语法
elementNode.parentNode //访问祖节点语法
elementNode.parentNode.parentNode <div id="text">
<p id="p">
parentNode
<span id="con"> 获取指点节点的父节点</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
var p=document.getElementById("p");
document.write(mynode.parentNode.parentNode.nodeName);
//获取父节点
document.write(p.parentNode.nodeName);
//获取祖节点
</script>
//运行结果
DIV
DIV
6、兄弟节点
1) nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)
语法:nodeObject.nextSibling
2)previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)
语法:nodeObject.previousSibling
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
例子:
运行结果:LI = javascript ; nextsibling: LI = jquery
7、插入节点
1)appendChild() ;在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)
参数:newnode:指定追加的节点。
例子:
运行结果:
HTML
JavaScript
This is a new p
2)insertBefore()方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
参数:newnode: 要插入的新节点 ; node: 指定此节点前插入节点。
运行结果:
This is a new p
JavaScript
HTML
8、删除节点removeChild() ;removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
语法:nodeObject.removeChild(node)
参数: node :必需,指定需要删除的节点。
例子:
运行结果:
HTML
删除节点的内容: javascript
注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。
如果要完全删除对象,给 x 赋 null 值,代码如下:
9、替换元素节点replaceChild()实现子节点(对象)的替换。返回被替换对象的引用。
语法 :node.replaceChild (newnode,oldnew )
参数:newnode : 必需,用于替换 oldnew 的对象 ;oldnew : 必需,被 newnode 替换的对象。
例子:
运行结果:将文档中的 Java 改为 JavaScript。
10、创建“节点”
1)createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法:document.createElement(tagName)
参数:tagName:字符串值,这个字符串用来指明创建元素的类型。
注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。
例子:
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "创建一个按钮";
body.appendChild(input);
</script>
在HTML文档中,创建一个按钮。
<script type="text/javascript">
var body= document.body;
var btn = document.createElement("input");
btn.setAttribute("type", "text");
btn.setAttribute("name", "q");
btn.setAttribute("value", "使用setAttribute");
btn.setAttribute("onclick", "javascript:alert('This is a text!');");
body.appendChild(btn);
</script>
运行效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。
2)创建文本节点createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。
语法:document.createTextNode(data) ;
参数:data : 字符串值,可规定此节点的文本。
例子:创建一个<div>元素并向其中添加一条消息,代码如下:
运行结果:
JavaScript的DOM(文档对象)基础语法总结2的更多相关文章
- 前端开发—BOM对象DOM文档对象操作
BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...
- DOM文档对象总结
DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 第一百一十四节,JavaScript文档对象,DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- JavaScript学习总结(一)DOM文档对象模型
一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- 文档对象类型DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- Javascript 强制浏览器渲染Dom文档
在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...
随机推荐
- Centos 7 意外断电如何处理
拔U盘的时候,不小心碰到了主机上的开机键-- 还好默认的响应动作是睡眠-- 还不知道 CentOS 怎么样应对意外断电呢?!
- awk-模式匹配
使用awk作为文本处理工具,正则表达式是少不了的. 要掌握这个工具的正则表达式使用.其实,我们不必单独去学习它的正则表达式.正则表达式就像一门程序语言,有自己语法规则已经表示意思. 对于不同工具,其实 ...
- OBIEE 缓存机制
1,EM下开关缓存和rpd中高速缓存是一件事,就是nqserver的缓存, 由nqsconfig.ini中配置决定cache是否开启. 当然rpd里面还需要设置,具体的表是否要缓存. 这部分可以看这篇 ...
- WPF中override ResourceDictionary中的设置的方法
当资源文件里改变了控件的样式时,在使用的地方如果想改变资源文件里修改的内容,会造成无法达到预期目的的结果. 以DataGrid为例,我在资源文件里,改变了默认的DataGrid的样式,其中我设置了Is ...
- python流程控制:while循环
python编程中whihe语句用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务. while循环语句格式: while <判断条件>: 执行语句 count ...
- erase-credentials配置
转自:Spring Security怎样不让默认的ProviderManager清除密码等信息 <authentication-manager erase-credentials="f ...
- 【Python】考虑用生成器改写直接返回列表的函数
使用生成器的好处是显而易见的,可以使代码更加清晰,同时减小内存的消耗,当函数需要返回列表,把函数改写为生成器是相对容易的. 下面这两个函数返回字符串中每个单词的索引: def index_words1 ...
- php笔记(六)PHP类与对象之对象接口
接口的实现 <?php //interface 关键字用于定义一个接口 interface ICanEat{ //接口里面的方法不需要实现 public function eat($food); ...
- Java之JSP基础语法
1.JSP页面元素简介及page指令 2.JSP注释,3种不同注释 <!-- 我是HTML注释,在客户端可见 --> <%--我是JSP注释,在客户端不可见 --%> ...
- 1张图看懂RAID功能,6张图教会配置服务器【转】
RAID 包含一组或者一个集合甚至一个阵列.使用一组磁盘结合驱动器组成 RAID 阵列或 RAID 集.将至少两个磁盘连接到一个 RAID 控制器,而成为一个逻辑卷,也可以将多个驱动器放在一个组中.一 ...