javascript(三)——DOM(续)

2017-12-09 本文已影响0人子约nan

DOM属性

1.nodeName

文档里的每个节点都有以下属性。
nodeName:一个字符串，其内容是给定节点的名字。
var name = node.nodeName;
- 如果节点是元素节点，nodeName返回这个元素的名称；
- 如果是属性节点，nodeName返回这个属性的名称；
- 如果是文本节点，nodeName返回一个内容为#text 的字符串；
nodeName 是一个只读属性。

2.nodeType

返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值,常用的有三种：
- Node.ELEMENT_NODE
- Node.ATTRIBUTE_NODE
- Node.TEXT_NODE
nodeType 是个只读属性。

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

如果给定节点是一个属性节点，返回值是这个属性的值；
如果给定节点是一个文本节点，返回值是这个文本节点的内容；
如果给定节点是一个元素节点，返回值是 null；
nodeValue 是一个读/写属性，但不能对元素节点的 nodeValue 属性设置值，但可以为文本节点的 nodeValue 属性设置一个值。

查找元素节点

getElementById()

寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.
var oElement = document.getElementById ( sID )
该方法只能用于 document 对象

getElementsByName()

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

getElementsByTagName()

寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements .length);

查找属性节点和值及替换节点

1.查找属性节点和值

getAttribute()
- 返回一个给定元素的一个给定属性节点的值
  var attributeValue = element.getAttribute(attributeName);
- 给定属性的名字必须以字符串的形式传递给该方法。
- 给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个null.

2.替换节点

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

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>替换节点内容</title>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
    <ul>
        <li id="tar" onclick="_changeNode()">点这里</li>
        <li>湖南</li>
        <li>山东</li>
    </ul>
    <ul>
        <li id="game">打<span style="color:red">灰</span>机</li>
        <li>抓泥鳅</li>
        <li>斗地主</li>
    </ul>
</body>
</html>

function _changeNode() 
    var tarNode = document.getElementById("tar");
    var gameNode = document.getElementById("game");
    tarNode.parentNode.replaceChild(gameNode, tarNode);
}

javascript(三)——DOM(续)

getElementById()

getElementsByName()

getElementsByTagName()

猜你喜欢

热点阅读