一、操作子节点

  • 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. Backbone模型

    现在进入最关键的组件 - 模型.模型用来存储应用的所有数据,以及直接和数据操作相关的逻辑.Backbone中的模型类是Backbone.Model,它包含了数据存储,数据验证,以及数据发生变动时触发相 ...

  2. python 解析json loads dumps

    认识 引用模块 重要函数 案例 排序 缩进参数 压缩 参考 认识 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standa ...

  3. C++ enum

    为啥需要枚举类型 编程语言中的所有特性都是为了满足某种需求,达到某个目的还出现.不会莫名其妙的出现在那. 枚举可以用来保存一组属性的值.enum的全称是enumeration意思是列举 看着这句话可能 ...

  4. javascript原型Prototype

    在javaScript创建对象一文中提到过:用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同方法是不一样的,所以我们用原型把构造函数中公共的属性和方法提取出来进行封装,达到让所有实例共享的 ...

  5. jquery模拟下拉框单选框复选Select，Checkbox，Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  6. 权限框架 - shiro 授权demo

    之前说了权限认证,其实也就是登录验证身份 这次来说说shiro的授权 shiro可以针对角色授权,或者访问资源授权 两者都行,但是在如今的复杂系统中,当然使用后者,如果你是小系统或者私活的话,前者即可 ...

  7. Android系列之UI组件----Menu菜单

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  8. java13-5 JDK1.5以后的一个新特性和Integer的面试题

    1.JDK5的新特性 自动装箱:把基本类型转换为包装类类型 自动拆箱:把包装类类型转换为基本类型 注意一个小问题: 在使用时,Integer x = null;代码就会出现NullPointerExc ...

  9. 关于OAuth2.0的文章收集

    http://blog.csdn.net/seccloud/article/details/8192707

  10. javascript使用栈结构将中缀表达式转换为后缀表达式并计算值

    1.概念 你可能听说过表达式,a+b,a+b*c这些,但是前缀表达式,前缀记法,中缀表达式,波兰式,后缀表达式,后缀记法,逆波兰式这些都是也是表达式. a+b,a+b*c这些看上去比较正常的是中缀表达 ...