图片 1

//测试元素节点,这个方法将返回一个节点集合

JavaScript:DOM编程1



JavaScript:DOM编程
1.节点及其类型
1)元素节点
2)属性节点:元素的属性,通常情况下, 操作属性节点直接通过
“元素节点.属性名” 的方式来读写属性值
3)文本节点:是元素的子节点,其内容为文本

donot forget me

element node : p
attribute node : title=”name”
text node :donot forget me

2.js在html中的位置
在中,写在window.onload = function(){ // js代码 };
window.onload事件,在文档加载完成后执行,故在这里可以获得任何元素。

3.如何获取元素节点
Element getElementById(String elementId):根据id属性获取对应的单个节点
NodeList getElementByTagName(String
tagName):根据标签名获取指定节点的集合
NodeList getElementByName(String
elementName):根据节点的name属性获取节点的集合
但IE的实现方式和W3C标准有差别:在html文档中,若某个节点(例如li)没有name属性,则IE使用getElementByName()不能获取到节点,但是火狐可以

4.获取属性节点
1)**可以通过Node.id(节点.属性)的方式来获取和设置属性节点的值
2)通过元素节点getAttributeNode(name)方法来获取属性节点,然后再通过nodeValue来读写属性值

5.获取元素节点的子节点(**只有元素节点才有子节点!!)
1)childNodes属性获取全部的子节点,但方法不实用。因为如果要获取指定的节点的指定子节点的结合,可以直接调用元素节点的getElementByTagName()方法来获取
2)firstChild属性获取第一个子节点
3)lastChild属性最后一个子节点
4)parentNode属性获取父节点

6.获取文本节点:
1)步骤:元素节点–>获取元素节点的子节点
2)若元素节点只有一个文本节点一个子节点
例如

北京
可以先获取到指定的元素节点eleNode,然后利用eleNode.forstChild.nodeValue的方法来读写其文本节点的值

7.节点属性(nodeType、nodeName、nodeValue)
nodeType、nodeName、nodeValue是每个Node都有的属性,像id、name是具体某个节点所具有的属性
1)nodeName:代表当前节点的名字,只读属性。**如果给定节点是一个文本节点,nodeName是#text
2)nodeType:返回一个整数,这个数值代表给定节点是类型。只读属性。1–元素节点,2–属性节点,3–文本节点
**3)nodeValue:返回给定节点的当前值(字符串)。可读写属性
①元素节点,返回值是null
②属性节点,返回值是这个属性的值
③文本节点,返回值是这个文本节点的内容
8.创建一个元素节点
1).createElement(String
elementName):按照给定的标签名创建一个新的元素节点。
方法只有一个参数:被创建的元素节点的名字,是一个字符串。
方法的返回值:是一个指向新建节点的引用指针,返回值是一个元素节点,所以它的nodeType属性值等于1
**新元素节点不会自动添加到文档里,它只是一个存在于JavaScript上下文的对象
9.创建一个文本节点
1).createTextNode(String
textValue):创建一耳光包含着给定文本的新文本节点,返回值是一个指向新文本节点的引用指针
方法只有一个参数:新建文本节点锁包含的文本字符串,新元素节点不会自动添加到文档整里。
10.为元素节点添加子节点
1)appendChild(Node node)
var reference = element.appendChild(newChild);
给定子节点newChild将成为给定元素节点element的最后一个子节点
方法的返回值是一个指向新增子节点的引用指针
11.节点的替换
1).replaceChild():把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,lodChild)
返回值是一个指向已被替换的那个子节点的引用指针
2).该节点除了替换功能以外还有移动的功能
3).该方法只能完成单向替换,若需要使用双向替换,需要自定义函数
12.删除节点
1).removeChild():从一个指定元素里删除一个子节点
var reference = element.removeChild(node)
返回值是一个指向已被删除的子节点的引用指针,某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除
如果删除某个节点,但不知道其父节点,可以通过parentNode属性获取
13.插入节点
1).insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode)
节点newNode将被插入到元素节点element中并出现在targetNode的前面
节点targetNode必须是element元素的一个子节点
14.innerHTML属性
1).浏览器几乎都支持该属性,但不是DOM标准的组成部分
innerHTML属性可以用来读写某个给定元素里的HTML内容
15.其他属性
parentNode属性:获取给定元素的父节点
nextSibling属性:获取给定元素的上一个元素
previousSibling属性:获取给定元素的下一个元素

JavaScript:DOM编程
1.节点及其类型 1)元素节点 2)属性节点:元素的属性,通常情况下,
操作属性节点直接通过 “元素节点.属性…

一、getElementById()

JavaScript之DOM编程

今天看了web 前端的一些知识,JavaScript的DOM编程笔记如下:

  1. 节点及其类型:
    1). 元素节点
    2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
    3). 文本节点: 是元素节点的子节点, 其内容为文本.

  2. 在 html 文档的什么位置编写 js 代码?

0). 直接在 html 页面中书写代码.
Click Me!
缺点:
①. js 和 html 强耦合, 不利用代码的维护
②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick
属性中完成对函数的引用, 比较麻烦

1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html
文档树还没有加载完成,
获取不到指定的节点:

Untitled Document
<script type="text/javascript">
var cityNode = document.getElementById("city");
//打印结果为 null.
alert(cityNode);
</script>


......

2). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯

3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload
事件, 
该事件在当前文档完全加载之后被触发,
所以其中的代码可以获取到当前文档的任何节点.

Untitled Document
<script type="text/javascript">
window.onload = function(){
var cityNode = document.getElementById("city");
alert(cityNode);
};
</script>


......
  1. 如何来获取元素节点:

1). **document.getElementById: 根据 id 属性获取对应的单个节点

2). **document.getElementsByTagName:

根据标签名获取指定节点名字的数组, 数组对象 length
属性可以获取数组的长度

3). document.getElementsByName:

根据节点的 name 属性获取符合条件的节点数组,

但 ie 的实现方式和 W3C 标准有差别:

在 html 文档中若某节点(li)没有 name 属性, 

则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

4). 其它的两个方法, ie 根本就不支持, 所以不建议使用

  1. 获取属性节点:

1). **可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值

2). 通过元素节点的 getAttributeNode 方法来获取属性节点,

然后在通过 nodeValue 来读写属性值

  1. 获取元素节点的子节点(**只有元素节点才有子节点!!):

1). childNodes 属性获取全部的子节点, 但该方法不实用.
因为如果要获取指定的节点

的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName()
方法来获取.

2). firstChild 属性获取第一个子节点

3). lastChild 属性获取最后一个子节点

  1. 获取文本节点:

1). 步骤: 元素节点 –> 获取元素节点的子节点

2). 若元素节点只有文本节点一个子节点,

例如

北京

,

你喜欢哪个城市?

,

可以先获取到指定的元素节点 eleNode,

然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

  1. 节点的属性:

1). nodeName: 代表当前节点的名字. 只读属性.

如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text
的字符串

2). nodeType:返回一个整数, 这个数值代表着给定节点的类型.

只读属性. 1 — 元素节点, 2 — 属性节点, 3 — 文本节点

3). nodeValue:返回给定节点的当前值(字符串). 可读写的属性

①. 元素节点, 返回值是 null.

②. 属性节点: 返回值是这个属性的值

③. 文本节点: 返回值是这个文本节点的内容

  1. 创建一个元素节点:
    1). createElement(): 按照给定的标签名创建一个新的元素节点.
    方法只有一个参数:被创建的元素节点的名字, 是一个字符串.
    方法的返回值:是一个指向新建节点的引用指针. 返回值是一个元素节点,
    所以它的 nodeType 属性值等于 1.
    **新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript
    上下文的对象.

  2. 创建一个文本节点:

1). createTextNode(): 创建一个包含着给定文本的新文本节点.
这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点,
所以它的 nodeType 属性等于 3.
方法只有一个参数:新建文本节点所包含的文本字符串.
新元素节点不会自动添加到文档里

  1. 为元素节点添加子节点:

1). appendChild(): var reference = element.appendChild(newChild):
给定子节点 newChild 将成为给定元素节点 element
的最后一个子节点.方法的返回值是一个指向新增子节点的引用指针.

  1. 节点的替换:

1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点

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

返回值是一个指向已被替换的那个子节点的引用指针

2). 该节点除了替换功能以外还有移动的功能.

3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:

/**
* 互换 aNode 和 bNode
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){

if(aNode == bNode){
return;
}

var aParentNode = aNode.parentNode;
//若 aNode 有父节点
if(aParentNode){
var bParentNode = bNode.parentNode;

//若 bNode 有父节点
if(bParentNode){
var tempNode = aNode.cloneNode(true);
bParentNode.replaceChild(tempNode, bNode);
aParentNode.replaceChild(bNode, aNode);
}
}


}   
  1. 插入节点:
    1). insertBefore():
    把一个给定节点插入到一个给定元素节点的给定子节点的前面

var reference = element.insertBefore(newNode,targetNode);

节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode
的前面. 节点 targetNode 必须是 element 元素的一个子节点。

2). 自定义 insertAfter() 方法

  /**
* 将 newChild 插入到 refChild 的后边
* @param {Object} newChild
* @param {Object} refChild
*/
function insertAfter(newChild, refChild){
var refParentNode = refChild.parentNode;

//判断 refChild 是否存在父节点
if(refParentNode){
//判断 refChild 节点是否为其父节点的最后一个子节点
if(refChild == refParentNode.lastChild){
refParentNode.appendChild(newChild);
}else{
refParentNode.insertBefore(newChild, refChild.nextSibling);
} 
}
}
  1. 删除节点:
    1). removeChild(): 从一个给定元素里删除一个子节点
    var reference = element.removeChild(node);
    返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild()
    方法删除时, 这个节点所包含的所有子节点将同时被删除.
    如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode
    属性可以帮忙。

  2. innerHTML属性:
    1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML
    属性可以用来读, 写某给定元素里的 HTML 内容

  3. 其它属性, 参看 API: nsextSibling, previousSibling 等

今天看了web
前端的一些知识,JavaScript的DOM编程笔记如下: 1. 节点及其类型: 1).
元素节点 2). 属性节点: 元素的属性, 可以…

最近在学习javascript关于DOM的一些知识,在这里对DOM做一些总结。

一、元素节点

  寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在,这样的元素,它返回 null.

1.DOM简介

复制代码 代码如下:

二、getElementsByName()

DOM是W3C的标准,主要定义了访问HTML和XML文档的标准:W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

//测试元素节点,输出节点名称,节点的类型,节点的值
  var liElements=document.getElementsByTagName(“li”);
  for(var i=0;i<liElements.length;i++){
     alert(liElements[i].nodeName);
     alert(liElements[i].nodeType);
     alert(liElements[i].nodeValue);
  }

  寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

W3C DOM标准被分为3个不同的部分:

二、属性节点

三、getElementsByTagName()

·核心DOM—针对任何结构化文档的标准模型

复制代码 代码如下:

  寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。

·XML DOM—针对XML文档的标准模型

[/c//测试属性节点,输出属性节点名称,节点的类型,节点的值
  var liElements=document.getElementsByTagName(“li”);
  for(var i=0;i<liElements.length;i++){
      var attrElement=liElements[i].getAttributeNode(“value”)
      alert(“attrElement.nodeName “+attrElement.nodeName);
      alert(“attrElement.nodeType “+attrElement.nodeType);
      alert(“attrElement.nodeValue
“+liElements[i].getAttribute(“value”));
  }ode]

四、**hasChildNodes()** 

·HTML DOM—针对HTML文档的标准模型

三、文本节点 [code]
 //测试元素节点,输出节点名称,节点的类型,节点的值
  var liElements=document.getElementsByTagName(“li”);
  for(var i=0;i<liElements.length;i++){
   alert(liElements[i].childNodes[0].nodeName);
   alert(liElements[i].childNodes[0].nodeType);
   alert(liElements[i].childNodes[0].nodeValue);

  该方法用来检查一个元素是否有子节点,返回值是 true 或 false

HTML DOM定义了所有HTML元素的对象和属性,以及访问它们的方法。也就是说HTML
DOM是关于如何获取、修改、添加或删除HTML元素的标准。

   liElements[i].childNodes[0].nodeValue=”南京”;
   alert(liElements[i].childNodes[0].nodeValue);

  文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回永远是 false.

2.DOM节点

   //另一种读取方法
   alert(liElements[i].firstChild.nodeName);
   alert(liElements[i].firstChild.nodeType);
   alert(liElements[i].firstChild.nodeValue);
  }

  如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。

在HTML DOM中,所有事物都是节点。DOM是被视为节点树的HTML。

四、替换节点

五、nodeName和nodeType

根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点:

replaceChild()
把一个给定父元素里的一个子节点替换为另外一个子节点
 var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中

  文档里的每个节点都有以下属性。

·整个文档是一个文档节点

复制代码 代码如下:

  nodeName:返回一个字符串,其内容是给定节点的名字 

·每个HTML元素是元素节点

 //方法一
//  var cityElement=document.getElementById(“city”);
//  var loveElement=document.getElementById(“love”);
//  var cityChildElement=document.getElementById(“beijing”);
//  var loveChildElement=document.getElementById(“fankong”);
//  var
oldElement=cityElement.replaceChild(loveChildElement,cityChildElement);
//  loveElement.appendChild(oldElement);
//  alert(oldElement.getAttribute(“id”));

  var name = node.nodeName;

·HTML元素内的文本是文本节点

  var cityElement=document.getElementById(“city”);
         cityElement.onclick=function(){
         var cityChildElement=document.getElementById(“beijing”);
         var loveChildElement=document.getElementById(“fankong”);
         var
oldElement=cityElement.replaceChild(loveChildElement,cityChildElement);
         loveElement.appendChild(oldElement);
         alert(oldElement.getAttribute(“id”));
  }

 

·每个HTML属性是属性节点

五、查找属性节点

   * 如果节点是元素节点,nodeName返回这个元素的名称

·注释是注释节点

getAttribute()  
返回一个给定元素的一个给定属性节点的值
 var attributeValue = element.getAttribute(attributeName);
给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回,如果给定属性不存在,getAttribute()
将返回一个空字符串.
通过属性获取属性节点
   getAttributeNode(属性的名称)–Node

   * 如果是属性节点,nodeName返回这个属性的名称

HTML DOM将整个HTML文档视为树结构,称为节点树:

  <li name=”beijing” id=”bj”>北京</li>

   * 如果是文本节点,nodeName返回一个内容为#text 的字符串

图片 1

   //通过属性名获取属性的值
     var  bjElement=document.getElementById(“bj”);
     var attributeValue=eduElement.getAttribute(“name”);
     alert(“attributeValue    “+attributeValue);

  注:nodeName 是一个只读属性。

图片来源于W3C

   //通过属性名获取属性的节点
   var  bjNode=eduElement.getAttributeNode(“name”);
       alert(eduNode.nodeValue);
       alert(eduNode.nodeType);
       alert(eduNode.nodeName);

nodeType:返回一个整数,这个数值代表着给定节点的类型。

通过HTML
DOM,树中的所有节点均可通过js访问。所有HTML元素均可被修改,也可以创建或删除节点。

六、设置属性节点

•nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:

节点之间的关系分为:父、子和同胞

setAttribute()
将给定元素节点添加一个新的属性值或改变它的现有属性的值。
   element.setAttribute(attributeName,attributeValue);
属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在,它的值将被刷新;
如果不存在,setAttribute()方法将先创建它再为其赋值。
 

•Node.ELEMENT_NODE    —1    — 元素节点

3.DOM方法

   <li  id=”bj” >北京</li>

•Node.ATTRIBUTE_NODE  —2    — 属性节点

方法是可以在节点上执行的动作。而要对节点进行访问,则首先要获取节点。可通过js对HTML
DOM进行访问。所有的HTML元素被定义为对象,而编程接口则是对象方法和对象属性。方法是能够执行的动作,而属性是能够获取或设置的值。

   //获取元素的引用
   var bjElement=document.getElementById(“bj”);
   //设置属性值
   bjElement.setAttribute(“name”,”beijing”);
   //获取设置的属性值
   var nameValue=bjElement.getAttribute(“name”);
   alert(“nameValue “+nameValue);

•Node.TEXT_NODE       —3    — 文本节点

(1)getElementById():返回带有指定ID的元素

 

•nodeType 是个只读属性

var element=document.getElementById(“idName”);

七、创建新元素节点

nodeValue:返回给定节点的当前值(字符串)

常用的HTML DOM方法:

createElement()
按照给定的标签名创建一个新的元素节点。方法只有一个参数:将被创建的元素的名字,是一个字符串.
  var reference = document.createElement(element);
方法的返回值:是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的
nodeType 属性值等于 1。
新元素节点不会自动添加到文档里,新节点没有 nodeParent
属性,它只是一个存在于 JavaScript 上下文的对象.
 var pElement = document.createElement(“p”);

•如果给定节点是一个属性节点,返回值是这个属性的值。

·getElementById(“idName”)—获取带有指定id的节点(元素)

   //创建一个新的元素
  var pElement=document.createElement(“li”);
  //设置属性值
  pElement.setAttribute(“id”,”pid”);

• 如果给定节点是一个文本节点,返回值是这个文本节点的内容。

·appendChild(node)—插入新的子节点(元素)

  //获取父元素
  var loveElement=document.getElementById(“love”);
  //在父元素中增加子元素
loveElement.appendChild(pElement);

•如果给定节点是一个元素节点,返回值是 null

·removeChild(node)—删除子节点(元素)

  //通过id获取刚创建的元素
  var pidElement=document.getElementById(“pid”);
  alert(pidElement.getAttribute(“id”));

• nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,

一些常用的HTML DOM属性:

 

 但可以为文本节点的 nodeValue 属性设置一个值

·innerHTML—节点(元素)的文本值

八、创建新文本节点

 var li = document.getElementByIdx_x_x_x(“li”);

·parentNode—节点(元素)的父节点

createTextNode()
创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
  var textNode = document.createTextNode(text);
方法只有一个参数:新建文本节点所包含的文本字符串
方法的返回值:是一个指向新建节点的引用指针。它是一个文本节点,所以它的
nodeType 属性等于 3.
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性

 if(li.firstChild.nodeType == 3)

·childNode—节点(元素)的子节点

      var pElementText=document.createElement(“li”);
  var textElement=document.createTextNode(“南京”);
  pElementText.appendChild(textElement);

 li.firstChild.nodeValue = “myLi”;

·attributes—节点(元素)的属性节点

九、插入节点(1)

六、replaceChild()

一些DOM对象方法

appendChild()
为给定元素增加一个子节点:                                  
   var newreference = element.appendChild(newChild).             
   给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素

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

(1)获取元素:getElementById、getElementByTagName()、getElementByClassName()

复制代码 代码如下:

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

(2)hasChildNodes()判断元素是否有子节点,返回值为true/false

 var newliElement=document.createElement(“li”);
 var textNode=document.createTextNode(“北京”);
 newliElement.appendChild(textNode);
 document.body.appendChild(newliElement);

  返回值是一个指向已被替换的那个子节点的引用指针。

(3)nodeName():如果节点是元素节点,nodeName返回元素的名称;如果给定节点为属性节点,nodeName返回属性的名称;如果给定节点为文本节点,nodeName返回为#text的字符串

 var liElement=document.getElementsByTagName(“li”);
 var textValue=liElement[0].firstChild.nodeValue;
 alert(textValue);

  如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中

(4)nodeType():元素节点类型,值为1;属性节点类型,值为2;文本节点类型,值为3;

十、删除节点

 

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

removeChild()
从一个给定元素里删除一个子节点
   var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。

发表评论

电子邮件地址不会被公开。 必填项已用*标注