一、操作子节点

  • 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. (转载)Javascript定义类（class）的三种方法

    因在公司内部培训中有讲解到JS类的概念,不甚明白,于是进行了google找到了相关的介绍说明,现将其摘抄下来,以作记录. 在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对 ...

  2. nyoj 139 我排第几个--康拓展开

    我排第几个 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 现在有"abcdefghijkl”12个字符,将其所有的排列中按字典序排列,给出任意一种排列,说 ...

  3. AngularJS跨域请求

    本文主要针对网上各种跨域请求的总结,并加入自己的验证判断,实现工作中遇到的跨域问题.所涉及到的领域很小,仅仅局限于:AngularJS CORS post 并同时需要实现json数据传送给服务器. 首 ...

  4. 《TCP/IP详解 卷一》读书笔记-----动态路由协议

    1.以下条件只要有一个不满足,则需要使用动态路由协议:1)网络规模小,2)只有一个连接点用于连接其他网络,3)没有冗余的路由器(一般用作备份) 2.所谓动态路由就是各个路由器与自己相邻的路由器交换各自 ...

  5. ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法

    ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法 近来正在分析淘宝中商品的信息,效果发生乱码,如: 原因便是中文字符格式发生冲突,ASP.NET MVC 默认采用utf-8,可是淘宝网页采用g ...

  6. 微博API使用

    新浪微博的API开放平台: http://open.weibo.com/wiki/%E5%BE%AE%E5%8D%9AAPI IOS和Android都有SDK可以下载,ios的地址: https:// ...

  7. POJ 1269 Intersecting Lines --计算几何

    题意: 二维平面,给两条线段,判断形成的直线是否重合,或是相交于一点,或是不相交. 解法: 简单几何. 重合: 叉积为0,且一条线段的一个端点到另一条直线的距离为0 不相交: 不满足重合的情况下叉积为 ...

  8. AC日记——阶乘之和 洛谷 P1009（高精度）

    题目描述 用高精度计算出S=1!+2!+3!+…+n!(n≤50) 其中“!”表示阶乘,例如:5!=5*4*3*2*1. 输入输出格式 输入格式: 一个正整数N. 输出格式: 一个正整数S,表示计算结 ...

  9. oracle用sqlplus创建新用户,不是plsql developer

    1.sqlplus /nolog 2.conn /as sysdba 3.alter user system identified by "123456"; 4.alter use ...

  10. 07SpringMvc_jsp到jsp的控制器_ParameterizableViewController

    本文主要讲的是控制器,Action继承什么类.记得Springmvc系列的第一篇文章说过.SpirngMVC的实现流程.