DOM节点例子

elementNode.setAttribute(name,value)

1.name: 要设置的属性名。

2.value: 要设置的属性值。

elementNode.getAttribute(name)

1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

2. name:要想查询的元素节点的属性名字

元素节点:构成了DOM的基础。文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)
文本节点:包含在元素节点中。
属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述,比如id,name之类的。

nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释:nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有:
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body><div>
            <span id="span">各类节点</span>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var element = document.getElementById("span");
                var text = element.firstChild;
                var property = document.getElementById("span").getAttributeNode("id");
                //nodeName
                alert("这是元素节点的返回值:" + element.nodeName); //返回的标签名SPAN,注意是大写的
                alert("这是文本节点的返回值:" + text.nodeName); //返回的#text
                alert("这是属性节点的返回值:" + property.nodeName); //返回的是属性名,这里是id
                //nodeValue
                alert("这是元素节点的返回值:"+ element.nodeValue);//本身就没有意义,返回的是null
                alert("这是文本节点的返回值:"+ text.nodeValue);//返回的是文本值  各类节点
                alert("这是属性节点的返回值:"+ property.nodeValue);//返回的是属性值,这里是id的属性值 span
                //nodeType
                alert("这是元素节点的返回值:"+ element.nodeType);//元素节点返回1
                alert("这是文本节点的返回值:"+ text.nodeType);//文本节点返回3
                alert("这是属性节点的返回值:"+ property.nodeType);//属性节点返回2
            }

        </script>
    </body>

</html>
时间: 2025-01-02 09:33:46

DOM节点例子的相关文章

访问DOM节点

我们来个例子,一个HTML里包含一段文本和一个无序的列表. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head&

JavaScript操作DOM节点

DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能.

java Dom小例子

仅仅是为了总结与学习. XML文件在我们的开发项目中经常使用,下面写了DOM解析的小例子. DomTestFile.xml文件如下: <?xml version="1.0" encoding="utf-8"?> <MenuContainer> <menu order="1.0" menuname="测试1" description="描述1"> <menu orde

DOM节点属性

节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一.nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同2. 属性节点的 nodeName 是属性的名称3. 文本节点的 nodeName 永远是 #text4. 文档节点的 nodeName 永远是 #document 二.nodeVal

【转】console.time 简单分析javascript动态添加Dom节点的性能

本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能体现差距)指的是循环创建的DOM节点 3 for(var i=0;i<totalNum;i++){}: 我们用for来表示就好了,简写代码 如果叫你用javascript动态增加DOM节点,你有哪几种思路呢? 1 .使用innerHTML和字符串拼接 console.time("time1"); var str = ""; for{ str += &quo

console.time 简单分析javascript动态添加Dom节点的性能

Bullshit 本来想每天都更新下博客的,但是最近要考试,还有就是自己还是停留在暗自窃喜中吧(这种想法要改变).其实最近总在想,自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实很多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的.说好一大堆废话之后,我最后再说一遍,管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能

dom操作例子

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="Scripts/jquery-1

jQuery的DOM 节点操作

一.节点的操作 1.查找节点: var $var_1=$("htmltype"); //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=$(

动态操作DOM节点js实现

    近日再次翻看<javascript面向对象编程指南>这本书,读到浏览器环境一章,渐渐明白了js作为脚本语言,需要依托宿主环境来实现功能,从浏览器角度考虑,就是对浏览器的BOM和DOM的操作.DOM操作又可分为:访问.修改.删除.新建.每种操作都有独特的方法和属性.下面取dom节点的访问.新建和删除的功能实例来讲解(参考文章).     <INPUT LEFT: 392px; POSITION: absolute; TOP: 128px" type="butto