码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript---DOM文档

时间:2015-07-18 21:11:50      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

 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>

效果图:技术分享

技术分享

 

JavaScript---DOM文档

标签:

原文地址:http://www.cnblogs.com/caofangsheng/p/4657464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!