一、操作子节点

  • 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. POJ 2823 Sliding Window

    Sliding Window Time Limit: 12000MSMemory Limit: 65536K Case Time Limit: 5000MS Description An array ...

  2. 关于 Python 你需要知道的几个概念

    Python 一种支持面向对象和函数式(面向过程)的高级编程语言 CPython 由 C 语言编译,一种默认的,通常我们所提及的基于 C 的 Python 的一种实现 Cython 一种 Python ...

  3. LeetCode题目分类

    利用堆栈:http://oj.leetcode.com/problems/evaluate-reverse-polish-notation/http://oj.leetcode.com/problem ...

  4. 如何用dos命令运行testng

    写好的自动化程序怎么让它运行呢,总不能每次都启动eclipse吧,下面就先介绍一种用dos命令运行testNG的方法. 1.把项目打成jar吧,我用的是Fat jar工具. 2.在电脑的某个盘建一个文 ...

  5. 二分法 codevs 1432 总数统计

    codevs 1432 总数统计  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 给出n个数,统计两两之和小于k的方 ...

  6. UESTC 886 方老师金币堆 --合并石子DP

    环状合并石子问题. 环状无非是第n个要和第1个相邻.可以复制该行石子到原来那行的右边即可达到目的. 定义:dp[i][j]代表从第i堆合并至第j堆所要消耗的最小体力. 转移方程:dp[i][j]=mi ...

  7. HDU 4419 Colourful Rectangle --离散化+线段树扫描线

    题意: 有三种颜色的矩形n个,不同颜色的矩形重叠会生成不同的颜色,总共有R,G,B,RG,RB,GB,RGB 7种颜色,问7种颜色每种颜色的面积. 解法: 很容易想到线段树扫描线求矩形面积并,但是如何 ...

  8. HDU 2955 Robberies --01背包变形

    这题有些巧妙,看了别人的题解才知道做的. 因为按常规思路的话,背包容量为浮点数,,不好存储,且不能直接相加,所以换一种思路,将背包容量与价值互换,即令各银行总值为背包容量,逃跑概率(1-P)为价值,即 ...

  9. Android代码规范----按钮单击事件的四种写法

    [前言] 按钮少的时候用第三种的匿名内部类会比较快,比如写demo测试的时候或者登陆界面之类. 按钮多的时候一般选择第四种写法. 一.第一种写法:在XML文件中声明onClick属性(很少用) 在XM ...

  10. JMeter学习（十九）JMeter测试MongoDB

    JMeter测试MongoDB性能有两种方式,一种是利用JMeter直接进行测试MongoDB,还有一种是写Java代码方式测试MongoDB性能. 第一种方法 1.编写Java代码,内容如下: pa ...