一、操作子节点

  • 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. OpenGL 学习笔记 01 环境配置

    以下教程仅适用于Mac下的Xcode编程环境!其他的我也不会搞. 推荐教程:opengl-tutorial  本项目Github网址       OpenGL太可怕了...必需得把学的记下来,不然绝壁 ...

  2. [转载] vim带你装逼带你飞(一)

    前言:逃离windows有很长时间了,特别是当今android盛行的时代,我们没有理由不选择ubuntu作为编译开发android之首选.其实操作系统只是我们使用的一个工具, windows也好lin ...

  3. virtualbox 在window10上的兼容性调整

    更新完windows10后,打开当时的virtualbox 4.3.3已经是最新的啦,打开原来安装的几个虚拟机(hadoop),发现均失败. 打开setting一看,网络一栏有问题,桥接模式的虚拟机都 ...

  4. Hive UDF’S addMonths

    our project use hive 0.10 , and in the hiveql , we need use addMonths function builtin in hive-0.11. ...

  5. python中如何将str转换成dict

    >>>user "{'a':'b'}" >>>b = eval(user) >>>b {'a':'b'}

  6. UVA 11235 Frequent Values ---RMQ

    大白书上的例题,具体讲解见大白书,最好用用一个Log数组直接求k,这样就是纯O(1)了 #include <iostream> #include <cstdio> #inclu ...

  7. AC日记——积木大赛 洛谷 P1969

    题目描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第i块积木的最终高度需要是hi. 在搭建开始之前,没有任何积木(可以看成 ...

  8. 十个Flex/Air疑难杂症及解决方案简略

    十个Flex/Air疑难杂症及解决方案简略 转自http://blog.sban.us/40.html 最近去一家台企,对方给我出了十道“难道”:在TileList中如果選擇檔過多,會出現捲軸,當拖動 ...

  9. 【markdown】markdown常用语法

    标题 用1~6个# 标题1 标题2 标题3 标题4 标题5 标题6 源码: # 标题1 ## 标题2 ### 标题3 #### 标题4 ##### 标题5 ###### 标题6 引用 引用使用 引用使 ...

  10. java 16 - 9 增强for的概述和使用

    JDK5的新特性:自动拆装箱,泛型,增强for,静态导入,可变参数,枚举 增强for:是for循环的一种. 格式: for(元素数据类型 变量 : 数组或者Collection集合) { 使用变量即可 ...