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")[].nodeValue = "hello world";

            alert(firstP);

            var SecondP = document.getElementsByTagName("p")[].firstChild.nodeName = "hello world again";

            alert(SecondP);
<body>

    <h1>我是标题1</h1>

    <p>我是段落标签</p>

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li><a href="http://www.baidu.com">百度一下，你就知道</a></li>

        <li></li>

        <li></li>

        <li></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 = ; 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文档的更多相关文章

  1. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  2. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  3. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

  4. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...

  5. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

  6. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  7. ready是先执行的，load后执行，DOM文档的加载步骤

    在jq中在文档载入完毕后有这几种方式去执行指定函数: $(document).ready(function() { // ...代码... }); //document ready 简写 $(func ...

  8. 将XML解析成DOM文档

    在支持html5的浏览其中,可以使用标准解析器DOMParser对象进行解析html或者xml等字符串 var data = '<div></div>'; var tmp = ...

  9. 转 创建 JavaScript XML 文档注释

    http://www.cnblogs.com/chenxizhang/archive/2009/07/12/1522058.html 如何:创建 JavaScript XML 文档注释 Visual ...

  10. Jsoup库 解析DOM文档

    DOM文档包括 HTML, XML等等 下载: http://jsoup.org/download Jsoup 获取数据的方式 //html 文本, url, 本地html String html = ...

随机推荐

  1. liunx 服务内存消耗100% 怎么处理

      一.排查问题 查看内存使用 free 查看进程使用存储状况.看是不是业务进程在消耗存储,如果是就要优化业务代码了 使用top 命令 如果不是怎么办 二.处理办法 1.把没有用到的消耗内存的服务进程 ...

  2. Scala 深入浅出实战经典 第62讲：Scala中上下文界定内幕中的隐式参数实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...

  3. mac OSX 上 brew install hive

    本文介绍brew install hive并修改默认的metastore存储方案,改Derby数据库为mysql的方法以及可能遇到的问题的解决方案. 1. 通过homebrew安装hive 1 bre ...

  4. 使用 ContentProviderOperation 来提升性能

    ContentProviders  是android 系统核心组件之一,ContentProviders 封装了数据的访问接口,其底层数据一般都是保存在数据库中或者保存在云端. 有时候你需要更新多行数 ...

  5. 项目管理知识体系指南(PMBOOK指南)(第5版) 阅读摘要

    1.7.2 项目经理的人际技能 领导力: 团队建设: 激励: 沟通: 影响力: 决策能力: 政治和文化意识: 谈判: 建立信任: 冲突管理: 教练技术: 3.4 规划过程组 在制定项目管理计划和项目文 ...

  6. JS实现IOS风格对话框 jquery / zepto

    Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: ...

  7. TokuDB调研文档

    另见链接:http://note.youdao.com/share/?id=77dd1e9cc139b57586665f702467c56a&type=note   安装 安装主要包括两种方法 ...

  8. 初探Stage3D(二) 了解AGAL

    关于本文 本文并无打算事无巨细的介绍一遍AGAL,仅仅是对现有文档的一些理解及汇总,所以请先阅读相参考文档 AGAL概念 参考资料 http://www.adobe.com/devnet/flashp ...

  9. 【转】每个人应该知道的NVelocity用法

    NVelocity是一个基于.NET的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由.NET代码定义的对象.从而使得界面设 ...

  10. Android 使用版本控制工具时添加忽略文件方式

    一.使用SVN管理项目时,添加忽略文件的方式 Android Studio 配合SVN时,添加忽略文件相对简单,首先打开项目的Settings选项,切换到Version Control下的Ignore ...