一、操作子节点

  • childNodes

　　通过该方式可以获取父节点下的所有子节点，但是由于浏览器的差异，这写节点中可能包含文本节点。

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <script type="text/javascript">

    window.onload = function (){

        var oUl = document.getElementById('ul1');

        alert(oUl.childNodes.length);

    }

    </script>

</head>

<body>

<ul id="ul1">

    <li></li>

    <li></li>

</ul>

</body>

</html>

我们通过浏览器打开上面的代码会发现提示框是5。这是因为 ul 标签中的空白处可以被视为文本节点。如果只直接访问 li 节点则需要进行节点类型判断。

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <script type="text/javascript">

    window.onload = function (){

        var j=0;

        var node;

        var oUl = document.getElementById('ul1');

        for(i=0; i<oUl.childNodes.length; i++){

            //1表示该节点是一个元素节点

            if(oUl.childNodes[i].nodeType == 1)

                j++;

        }

        alert(j);

    }

    </script>

</head>

<body>

<ul id="ul1">

    <li></li>

    <li></li>

</ul>

</body>

</html>

  • children

　　通过该方法可以直接获取父节点下的元素节点

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <script type="text/javascript">

    window.onload = function (){

        var oUl = document.getElementById('ul1');

        alert(oUl.children.length);

        oUl.children[0].style.background = "red";

    }

    </script>

</head>

<body>

<ul id="ul1">

    <li></li>

    <li></li>

</ul>

</body>

</html>

firstChild和 lastChild是分别访问子标签中的第一个节点和最好一个节点，不过可能会出现问题就是访问到的可能是元素节点。

二、操作父节点

  • parentNode

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <script type="text/javascript">

        window.onload = function(){

        var oAs = document.getElementsByTagName('a');

        for(var i=0; i<oAs.length; i++){

            oAs[i].onclick = function (){

                this.parentNode.style.display = "none";

            };

        }

        }

    </script>

</head>

<body>

<ul id="ul1">

    <li><a href ="javascript:void(0);">隐藏</a></li>

    <li><a href="javascript:void(0);">隐藏</a></li>

</ul>

</body>

</html>

通过上面的方式可以让父节点隐藏

  • offsetParent

　　寻找脱离文档流的父节点(使用了绝对定位或相对定位的父节点)

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <script type="text/javascript">

        window.onload = function(){

            var oDiv = document.getElementById('div2');

            oDiv.offsetParent.style.backgroundColor="yellow";

        }

    </script>

    <style type="text/css">

        #div1{

            width: 100px;

            height: 100px;

            background-color: red;

            position: relative;

        }

        #div2{

            width: 100px;

            height: 100px;

            position: absolute;

            top: 20px;

            left: 20px;

            background-color: blue;

        }

    </style>

</head>

<body>

<div id="div1">

    <div id="div2"></div>

</div>

</body>

</html>

如果去掉#div1中的position属性，则整个body的背景会变为黄色，如果不去则只有div1的背景是黄色

  • setAttribute

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <script type="text/javascript">

        window.onload = function(){

            var oBtn = document.getElementById('1');

            oBtn.onclick = function (){

                var oInput = document.getElementById('2');

                oInput.setAttribute("value", "div2");

            }

        }

    </script>

</head>

<body>

<input type="text" id="2">

    <button id="1">按键</button>

</div>

</body>

</html>

setAttribute方法有很多限制，如果允许的话最好选择JQuery中的attr方法。removeAttribute移除某个属性，获取属性值getAttribute。

  • className

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <script type="text/javascript">

    function getByClass(oParent, className){

        var result = [];

        var oTags = oParent.getElementsByTagName("*");

        for(var i=0; i<oTags.length; i++){

            if(oTags[i].className == className)

                result.push(oTags[i]);

        }

        return result;

    }

        window.onload = function(){

            var oUl = document.getElementById('ul');

            var cboxes = getByClass(oUl, "box");

            for(var i=0; i<cboxes.length; i++)

                cboxes[i].style.backgroundColor = "red";

        }

    </script>

</head>

<body>

    <ul id="ul">

        <li class="box">1</li>

        <li>2</li>

        <li class="box">32</li>

        <li class="box">4</li>

    </ul>

</div>

</body>

</html>

className用于判断标签使用的类选择器

js中的DOM操作(1)的更多相关文章

  1. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  2. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  3. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  4. ref 和 React.js 中的 DOM 操作

    在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...

  5. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  6. js中的DOM操作(2)

    1.表格的更加与删除 <!DOCTYPE html> <html> <head> <title>表格操作</title> <style ...

  7. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  8. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  9. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

随机推荐

  1. jquery获取复选框（checkbox）的选中值（一组和单个）

    使用jquery获取一组或者单个checkbox的选中状态的值.下面通过一个示例进行说明,假设现有一页面有一组checkbox的name的值为id,那么获取这组name=id的checkbox的值的方 ...

  2. Unity3d内置浏览器

    uWebKit是一个Unity3d插件,个人认为比较强大,值得收藏啊 有图有真相: 安装以及破解说明: 1.导入资源包 2.将破解目录里的Editor复制到工程项目的Assets目录下进行覆盖 3.打 ...

  3. ZooKeeper系列4：ZooKeeper API简介及编程

    问题导读: 1.ZooKeeper API 共包含几个包? 2.如何使用ZooKeeper API 创建zookeeper应用程序? 1)ZooKeeper API 简介   ZooKeeper AP ...

  4. POJ 1984 Navigation Nightmare

    并查集,给n个点和m条边,每条边有方向和长度,再给q个询问,第i个询问查询两个点之间在Ti时刻时的曼哈顿距离(能连通则输出曼哈顿距离,否则输出-1) 这题跟Corporative Network 有点 ...

  5. SSO - 我们为何需要单点登录系统

    SSO,Single Sign On,也就是单点登录,保证一个账户在多个系统上实现单一用户的登录 现在随着网站的壮大,很多服务会进行拆分,会做SOA服务,会使用dubbo做微服务,或者简单的小型分布式 ...

  6. nginx 一二事(2) - 创建虚拟静态服务器

    一.什么是nginx 是一个C语言开发的HTTP反向代理服务器,性能非常高 一个俄罗斯的哥们开发的,官方提供的测试性能能够达到5W的并发,我的天呐~,实际测试差不多是2W,而淘宝的牛人可以优化到200 ...

  7. xampp 用phpmyadmin在页面上修改密码后，无法登陆，密码没问题

    xampp 用phpmyadmin在页面上修改密码后,无法登陆,密码没问题一直提示密码错误, 什么原因? ------解决方案--------------------改了密码之后,phpmyadmin ...

  8. 一款免费好用的正则表达式工具：Regex Match Tracer

    推荐分享:一款免费好用的正则表达式工具:Regex Match Tracer  v2.1.5  free version 下载地址:Regex Match Tracer

  9. MongoDB学习（一）简介

    本篇主要简单介绍一下MongoDB数据库. 一.简介 mongoDB是一个开源的,基于分布式的,面向文档存储的非关系型数据库.是非关系型数据库当中功能最丰富.最像关系数据库的. mongoDB由C++ ...

  10. Redis缓存数据库详解

    Redis最为常用的数据类型主要有以下五种: 1)String 2)Hash 3)List 4)Set 5)Sorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Redis内部内存 ...