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的更多相关文章

  1. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

  2. DOM文档对象总结

    DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...

  3. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  4. 第一百一十四节,JavaScript文档对象,DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  5. JavaScript学习总结(一)DOM文档对象模型

    一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...

  6. JavaScript学习笔记7 之DOM文档对象模型

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  7. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  8. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  9. 文档对象类型DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...

  10. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...

随机推荐

  1. Centos 7 意外断电如何处理

    拔U盘的时候,不小心碰到了主机上的开机键-- 还好默认的响应动作是睡眠-- 还不知道 CentOS 怎么样应对意外断电呢?!

  2. awk-模式匹配

    使用awk作为文本处理工具,正则表达式是少不了的. 要掌握这个工具的正则表达式使用.其实,我们不必单独去学习它的正则表达式.正则表达式就像一门程序语言,有自己语法规则已经表示意思. 对于不同工具,其实 ...

  3. OBIEE 缓存机制

    1,EM下开关缓存和rpd中高速缓存是一件事,就是nqserver的缓存, 由nqsconfig.ini中配置决定cache是否开启. 当然rpd里面还需要设置,具体的表是否要缓存. 这部分可以看这篇 ...

  4. WPF中override ResourceDictionary中的设置的方法

    当资源文件里改变了控件的样式时,在使用的地方如果想改变资源文件里修改的内容,会造成无法达到预期目的的结果. 以DataGrid为例,我在资源文件里,改变了默认的DataGrid的样式,其中我设置了Is ...

  5. python流程控制:while循环

    python编程中whihe语句用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务. while循环语句格式: while <判断条件>: 执行语句 count ...

  6. erase-credentials配置

    转自:Spring Security怎样不让默认的ProviderManager清除密码等信息 <authentication-manager erase-credentials="f ...

  7. 【Python】考虑用生成器改写直接返回列表的函数

    使用生成器的好处是显而易见的,可以使代码更加清晰,同时减小内存的消耗,当函数需要返回列表,把函数改写为生成器是相对容易的. 下面这两个函数返回字符串中每个单词的索引: def index_words1 ...

  8. php笔记(六)PHP类与对象之对象接口

    接口的实现 <?php //interface 关键字用于定义一个接口 interface ICanEat{ //接口里面的方法不需要实现 public function eat($food); ...

  9. Java之JSP基础语法

    1.JSP页面元素简介及page指令     2.JSP注释,3种不同注释 <!--  我是HTML注释,在客户端可见 --> <%--我是JSP注释,在客户端不可见 --%> ...

  10. 1张图看懂RAID功能,6张图教会配置服务器【转】

    RAID 包含一组或者一个集合甚至一个阵列.使用一组磁盘结合驱动器组成 RAID 阵列或 RAID 集.将至少两个磁盘连接到一个 RAID 控制器,而成为一个逻辑卷,也可以将多个驱动器放在一个组中.一 ...