JavaScript---DOM文档

2024-04-27 14:06:50

字体：大中小

来源：转载

供稿：网友

javaScript---DOM文档

DOM文档中，每个节点都有一些重要的属性：

最重要的是nodeType,它描述该节点是什么---元素（element）、属性（attribute）、注释（comment）、文本（text）或者其他几种类型（共12个），nodeType:1表示元素节点，3表示文本节点。
另外一个重要的性质是nodeName,它表示元素的名字，如果是文本节点的话，则表示#text,根据文档类型和用户代理，nodeName可以是大写的，也可以是小写的，正是由于这个原因，在测试特定名称的时候，最好将其转化为小写。可以使用string对象的toLowerCase()方法来实现：if(obj.nodeName.toLowerCase()=='li'{});对于元素节点，可以使用tagName属性
nodeValue是节点的值：如果这个节点是元素，则它为null,如果元素是文本节点，则它为文本内容。对于文本节点，可以读取或设置nodeValue，从而能够更改元素的文本内容；

            //修改文本节点的内容,文本节点是nodeValue---            //这样写不起作用，第一个段落是一个元素节点，要改变段落内部的文本，就要访问内部的文本节点，即，这个段落标签的第一个子节点            var firstP = document.getElementsByTagName("p")[0].nodeValue = "hello world";            alert(firstP);            var SecondP = document.getElementsByTagName("p")[0].firstChild.nodeName = "hello world again";            alert(SecondP);

<body>    <h1>我是标题1</h1>    <p>我是段落标签</p>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li><a href="http://www.baidu.com">百度一下，你就知道</a></li>        <li>5</li>        <li>6</li>        <li>7</li>    </ul>    <p>段落尾部1</p>    <p>段落尾部2</p></body>

HTML

修改前效果图：

修改后效果图:

从父节点到子节点

firstChild属性是个简便用法，每个元素都可以有任意数量的子节点，可以通过childNodes属性列出来:

childNodes是所有该元素第一层子节点列表--并不包括向下更深的层次；
可以通过数组计数器或者item方法访问当前元素的子元素；
简便用法yourElement.firstChild和yourElement.lastChild是yourElement.childNodes[0]和yourElement.childNodes(yourElement.childNodes.length-1)的简化版本，可以使访问更简便一些；
可以通过方法hasChildNodes()检查一个元素是否，有子节点，他会返回一个bool值

现在我们来做一个例子，遍历元素的子节点：

<!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 type="text/Javascript">        function MyFunction() {            var domString = "";            //判断是否支持DOM            if (!document.getElementById || !document.createTextNode) {                return;            }            var demoList = document.getElementById("myList");            //判断给定Id的ul元素，是否定义过            if (!demoList) {                return;            }            //判断ul元素是否有子节点            if (demoList.hasChildNodes()) {                //有子节点的话，就遍历出来                var ch = demoList.childNodes;  //获取子节点                for (var i = 0; i < ch.length; i++) {                    //获取子节点的名称nodeName                    domString += ch[i].nodeName + "/n";                }                alert(domString);            }        }    </script></head><body>    <form>        <ul id="myList">            <li>列表1</li>            <li>列表2</li>            <li><a href="http://www.baidu.com">百度一下，你就知道～～～</a></li>            <li>列表4</li>            <li><p>夕阳无限好,只是近黄昏</p></li>            <li>列表6</li>            <li>列表7</li>        </ul>        <input type="submit" onclick="MyFunction()" value="hello，点击我呀～～～" />    </form></body></html>

效果图：

从子节点到父节点

通过parentNode属性可以，从子节点到父节点。下面我们来，做一个例子：

<!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 type="text/javascript">        function MyFunction() {            var myTaoBaoList = document.getElementById("myTaoBaoList");            //获取父节点的名称            var myfaterNode_TaoBao = myTaoBaoList.parentNode.nodeName;            alert(myfaterNode_TaoBao);            //获取祖宗节点（父节点的父节点）            var mygrantfaterNode_TaoBao = myTaoBaoList.parentNode.parentNode.nodeName;            alert(mygrantfaterNode_TaoBao);        }    </script></head><body>    <ul>        <li>列表1</li>        <li>列表2</li>        <li><a href="http://www.taobao.com" id="myTaoBaoList">淘宝网</a></li>        <li>列表4</li>        <li>列表5</li>    </ul>    <input type="submit" value="点我呀，看你点不点～～～" onclick="MyFunction()" /></body></html>

效果图：