资讯专栏INFORMATION COLUMN

重读 JavaScript DOM 编程艺术(一)--DOM 的增删改查

songze / 1460人阅读

摘要:在很久之前读过编程艺术,现在重读又有新的体会,遂记录下。唯一没有被其他元素包含的元素是元素,它是的根元素。是节点内的第一个子节点,所以将是一个值,应该写成才能得到。操作操作无非是增删改查,我们先看查和改。

在很久之前读过JavaScript Dom 编程艺术,现在重读又有新的体会,遂记录下。

什么是DOM

对于这种英文缩写,首先看它的英文全拼--Document Object Model,即文档对象模型。DOM把一份文档表示为一棵树,这是理解DOM模型的关键。是由节点(node)构成的一棵节点树。

关于节点

DOM中有许多不同类型的节点。其中最重要的有三种:元素节点(element node)文本节点(text node)属性节点(attribute node)

元素节点

元素节点是DOM的原子,比如

    等。

    元素可以包含其他元素。唯一没有被其他元素包含的元素是元素,它是DOM的根元素。

    文本节点

    比如

    it is a test

    ,“it is a test”就是一个文本节点。

    文本节点总是包含在元素节点内部。

    “it is a test”是

    节点内的第一个子节点,所以p.nodeVAlue将是一个null值,应该写成p.childNode[0].nodeValue,才能得到“it is a test”。

    属性节点

    比如

    it is a test

    title="hehe"就是属性节点,用来对元素做出更具体的描述。

    属性总是被放在开始标签里,所以属性节点总是被包含在元素节点中。

    DOM操作

    DOM操作无非是增删改查,我们先看查和改。

    getElementById

    这个方法返回一个与那个有着给定 id 属性值的节点对应的对象。

    这是DOM 的一个方法。

    getElementsByTagName

    这个方法返回一个对象数组,每个对象对应着这个标签的一个元素。

    可以使用数组的length方法,document.getElementsByTagName("li").length

    这是DOM 的一个方法。

    getElementsByClassName

    这是HTML5 DOM中新增的一个方法。接受类名参数返回一个具有相同类名的元素的数组,同样可以使用数组方法length

    只有较新的浏览器支持这个方法,书里给出了代码可以自己为为老浏览器实现这个方法:

    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
    

    这个函数接收两个参数。第一个node表示DOM树中的搜索起点,第二个classname就是要搜索的类名了。

    这是DOM 的一个方法。

    getAttribute

    这个方法只有一个参数--打算查询的属性的名字。

    这是DOM 的一个方法。而且是查询属性节点的方法。

    setAttribute

    这个方法接收两个参数,第一个是要修改的属性名字,第二个是做出的修改的值。

    object.setAttribute(attribute, value)

    这是DOM 的一个方法。并且是修改属性节点的方法。

    childNodes属性

    childNodes 属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组,同样,它支持length方法:

    element.childNodes
    nodeType属性

    每一个节点都有 nodeType 属性。这个属性可以让我们知道自己正在与哪一种节点打交道。

    node.nodeType

    差劲的是 nodeType 的值并不是文字,而是数字。

    nodeType 属性总共有12种可取值,但其中仅有3种具有使用价值:

    元素节点 的 nodeType 属性值是1。

    属性节点 的 nodeType 属性值是2。

    文本节点 的 nodeType 属性值是3。

    nodeValue 属性

    如果想改变一个文本节点的值,那就是用 DOM 提供的 nodeValue 属性,它用来得到(和设置)一个节点的值:

    node.nodeValue
    firstChildlastChild 属性
    node.firstChild

    这种写法完全等价于:

    node.childNodes[0]

    而相对应的

    node.lastChild

    等价于:

    node.childNodes[node.childNodes.length - 1]
    最后

    上面记录了基本的 DOM 的的方法,以及一些 DOM 节点的属性,下一篇文章会记录 DOM 的

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78661.html

相关文章

  • JavaScript中对象的增删改

    摘要:对象及其增删改查对象以后看到的,除了种基本数据类型就是对象中表示一个人的信息男如果使用基本数据类型,我们所创建的变量都是独立的,不能成为一个整体对象属于一种复合的数据类型,在对象可以保存多个不同的数据类型的属性对象的分类内建对象由标准中定                                 对象及其增删改查 Object:对象 以后看到的,除了5种基本数据类型就是对象 ...

    alighters 评论0 收藏0
  • Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改

    摘要:最近在做毕设,同学在做前端页面的时候使用到和这些控件,然后自己又在刷题的时候遇到一个这个的实现,于是就自己去官网文档上学习了一下,尝试实现这个官方文档代码代码效果如下图示顶部结构页面上的三个,增删改新增修改删除这里的框的 最近在做毕设,同学在做前端页面的时候使用到JQuery、DataTable和Bootstrap这些控件,然后自己又在刷题的时候遇到一个这个demo的实现,于是就自己去...

    oneasp 评论0 收藏0
  • Jquery与Bootstrap实现后台管理页面增删改功能

    摘要:使用与实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个页面,但麻雀虽小五脏俱全,常用的功能都用到了,本例用原生的与配合使用,不考虑的重构性及打包,该例子零耦合,开箱即用。相关文章实现双击内容变为可编辑状态 使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个CRUD页面,但麻雀虽小五脏俱全,JS常用的功能都用到...

    yankeys 评论0 收藏0
  • 初识DOM(文档对象模型)

    摘要:什么是什么是什么叫做呢的全称是文档对象模型,定义了表示和修改文档所需的对象这些对象的行为和属性以及这些对象之间的关系。对象即为宿主对象,由浏览器厂商定义,用来操作的功能的一类对象和集合。简单来说,就是用来操作和的,它是一系列对象的集合。什么是DOM 什么叫做DOM呢? • DOM的全称是Document Object Model 文档对象模型,DOM定义了表示和修改文档所需的对象、这些对象的...

    Elle 评论0 收藏0

发表评论

0条评论

songze

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<