javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

时间：2023-02-25 09:18:44

JavaScript的 DOM操作，主要是对DOM这三个字母中D、O、M的操作。D代表的是document(文档)，即我们可以使用javascript对文档进行操作，O代表的是object(对象)，对象包括用户自定义对象，内建对象和宿主对象，这里不再赘述，M代表的是model(模型)，今天我们主要讲的就是model。

model，就是把一份文档表示成一份树状结构的模型(ps：实在找不到图了，我觉得树状结构还是很容易脑补出来的吧！)，这个树状结构由无数个节点组成，因为这个性质，所以，我们可以把整个文档叫做节点树。这些节点组成了整个文档，就像盖房子一样，文档是一座房子，那么节点就是砖头。（这样的比喻还有很多）

节点主要分为三种：元素节点、文本节点，和属性节点。

<p color="red">hello world!</p>

上面这段html代码当中p就是元素节点，hello world！就是文本节点，color=”red”就是属性节点;

今天介绍的5种方法中，有三种就是获取元素的方法

1.document.getElementById(id);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习日记</title>

</head>

<body>

<p id="text">网络就像一个有神奇魔力的水晶球，从中我们可以找到无穷无尽的乐趣。 </p>

<p id="pic"><img src="data:images/a._Sun.jpg" width="128" height="128" /></p>
<script>
  alert(typeof document.getElementById("text"));
</script>

</body>

</html>

上面这段代码就是使用该方法获取了文档当中id为“text”  的独一无二的元素，该方法返回的是对应此独一无二元素的一个对象，我们用typeof操作符验证结果。上一段代码的输出结果为object。

2.document.getElementsByTagName(tag);

tag表示的是元素的名字，该方法返回的是一个数组，数组中包含了文档中所有此元素对应的对象。

<script>

  var para=document.getElementsByTagName("p");

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

    alert(typeof para[i]);

  }

</script>

把上面的一段代码代替第一段代码当中的javascript部分，para就是这个文档当中所有p元素的集合，既然是集合，那他必定有length属性，代表数组的长度。输出结果为两个object。

3.getElementsByClassName(class);

HTML5 DOM中新增的方法，获取文档中所有class属性为class的值。

但是，只有较新的浏览器才支持这个方法，所以程序员需要用已经有的方法来实现这个方法

function getElementsByClassName(node,classname){

        //如果浏览器支持，使用现有方法

        if(node.getElementsByClassName){

        return node.getElementsByClassName(classname);

        }else{

        var results=new Array();

        var elems = node.getElementsByTagName("*");

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

            if(elems[i].className.indexof(classname)!=-1){

                results[results.length]=elems[i]

            }

        }

        return results;

        }

    }

下面举一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习日记</title>

</head>

<body>

<p id="text">网络就像一个有神奇魔力的水晶球，从中我们可以找到无穷无尽的乐趣。 </p>

<p id="pic"><img src="data:images/a._Sun.jpg" width="128" height="128" /></p>

<ul id="line">

<li class="row1">row1</li>

<li class="row1">row1</li>

<li class="row2">row2</li>

<li class="row2">row2</li>

</ul>

<script>

    var line=document.getElementById("line");

    var row1=line.getElementsByClassName("row1");

    alert(row1.length);

</script>

</body>

</html>

上面的代码表示id为“line”节点下class为“row1”的元素的个数。

4.object.getAttribute(attribute);

获取某元素的属性值

var paras=document.getElementsByTagName("img");

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

        alert(paras[i].getAttribute("width"));

    }

上面代码获取了img标签的width属性的值。

也可以在for循环里面加一个if判断，判断可不可以取到相应的属性，提高代码的可读性。

5.object.setAttribute(attribute,value);

设置某个元素属性的值。

var imgs=document.getElementsByTagName("img");

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

        var width_val=imgs[i].getAttribute("width");

        if(width_val){

        imgs[i].setAttribute("width","228");

        }

    }

把img的width属性值设置为“228”。

以上的5个方法是dom操作中最基本，最常用的5个方法。

javascript dom编程艺术笔记第三章：DOM操作的5个基本方法的更多相关文章

  1. dom编程艺术笔记2--第三章

    DOM 1.dom:简单理解为文档对象模型<==>节点树 2.宿主对象:浏览器提供的对象—>document对象 3. html标签为树顶点元素 head body为html子元素以 ...

  2. JavaScript高级编程学习笔记&lpar;第三章之一）

    继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...

  3. JavaScript DOM编程艺术 笔记（三）函数

    函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...

  4. javascript dom 编程艺术笔记 第四章：图片库

    首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  5. dom编程艺术笔记1--第二章

    第二章语法部分: 1.js注释:<!-- XXXXX 而“-->”这部分js会认为是注释内容的一部分 2.var 声明变量 不用声明变量类型 3.声明使用一个数组语法:var object ...

  6. JavaScript DOM编程艺术 笔记（二）语句操作

    操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...

  7. 程序员编程艺术：第三章续、Top K算法问题的实现

    程序员编程艺术:第三章续.Top K算法问题的实现 作者:July,zhouzhenren,yansha.     致谢:微软100题实现组,狂想曲创作组.     时间:2011年05月08日    ...

  8. 《DOM Scripting》学习笔记-——第三章 DOM

    <Dom Scripting>学习笔记 第三章 DOM 本章内容: 1.节点的概念. 2.四个DOM方法:getElementById, getElementsByTagName, get ...

  9. Javascript高级编程学习笔记（35）—— DOM（1）节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

随机推荐

  1. js之 matches （可以取代jq的 delegate 方法）

    问题:请给#wrap 下面的子元素添加点击事件! <div id="wrap"> <a class="btn" href="http ...

  2. Simple colum formatting in Yii 2 GridView

    A very important widget in the business apps development is the GridView control. In this post I wil ...

  3. VC&plus;&plus;源文件编码

    目录 第1章源代码文件    1 1.1 研究思路    1 1.2 实验结果    3 1.3 #pragma setlocale    4 1.4 /source-charset    5 1.5 ...

  4. php截取字符串中的关键字，并高亮显示

    <?php $str = "hahaceshi测试一下关键字高亮显示,以及长字符串截取的问题!"; $key = "关键字"; $r = sub_key_ ...

  5. 三分钟学会CSS3中的FLEXBOX布局

    原文地址,保护版权,请勿转载:http://page.factj.com/blog/p/2574 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现 ...

  6. OSX 10&period;10&plus;Xcode5&period;1 无法启动或者安装应用程序到iOS 6&period;1 simulator

    错误症状: OSX 10.10+Xcode5.1 无法启动或者安装应用程序到iOS 6.1 simulator 错误原因: iOS Simulator 内核要使用OSX 系统内核,所以iOS Simu ...

  7. listview底部增加按钮

    View bottomView=getActivity().getLayoutInflater().inflate(R.layout.btn_my_course, null); myCourses = ...

  8. Android&colon; Toolbar、AppBarLayout

    ToolBar是google退出的一个应用程序动作条 包括: 设置导航栏图标 设置应用程序Logo 设置标题 设置子标题 添加各种自定义控件 添加动作条菜单 API:https://developer ...

  9. SQL语句实例集合

    SQL语句实例 表操作     例 1  对于表的教学管理数据库中的表 STUDENTS ,可以定义如下: CREATE  TABLE  STUDENTS (SNO      NUMERIC (6, ...

  10. Maven的classifier作用

    classifier可以是任意的字符串,用于拼接在GAV之后来确定指定的文件. 可用于区分不同jdk版本所生成的jar包 <dependency> <groupId>net.s ...

相关文章