一、javascript的三大核心

  1.ECMAScript js的语法标准

  2.DOM Document object Model 文档对象模型,提供的方法可以让js操作html标签

  3.BOM Browser Object Model 浏览器对象模型,提供的方法让js可以操作浏览器

注意:1. js里最大的boss是window,document只是window下的一个对象

  1. document.documentElement 这个东西可以拿到html

                document(在文档里,document是老大)
            |
           html
           / \
          /   \
          /     \
          body    head
          /       / | \
         /       / | \
        /       / |   \
      / | \   meta title  style...
     /  | \
    /   |   \
   div  p   ul...
   /
 /
 a

二、DOM的属性

js ---> DOM --> html

  js通过DOM去操作html标签

  1. childNodes 返回当前对象下的所有节点对象,会返回文本节点

注意: 在ie8下只会返回元素节点

  1. nodeType 返回节点类型,元素节点返回1 文本节点返回3 注释节点返回8

  2. children 返回对象下所有子元素节点,并且没有兼容问题

  3. firstChild 返回第一个子节点,在IE8跟childNodes一样的表现

  1. lastChild 返回最后一个子节点 同上

  1. firstElementChild 返回最后一个元素节点,不兼容IE8

  1. nextSibling 下一个兄弟节点 在主流的浏览器,可能会拿到除了元素节点以外的节点,在IE8里,只会返回元素节点,如果没有就返回null

  2. previousSibling 上一个兄弟节点 同上

  3. nextElementSibling 下一个兄弟元素节点 如果没有返回null 不兼容IE678

  1. previousElementSibling 上一个 同上

  2. parentNode * 返回父节点 没有兼容性

  3. offsetParent 返回定位父级,如果都没有找到,最后返回body上,没有兼容问题

  13.nodeName 返回标签的构造器 标签名大写字母

三、DOM的一些方法

  createElement(‘p’)

​     这个里面是标签

​     新建元素节点,需要接受一个参数,参数就是需要新建的标签。

  createTextNode()

​     新建文本节点

  createComment()

​     新建注释节点

节点操作

  添加元素节点

    1. 父级.appendChild(子节点)

    把子节点添加到父节点里去 往父级的所有子元素节点后 追加一个节点

  2. 父级.insertBefore(子节点, 指定的子节点)

    添加到指定的节点前面

  1. 父级.removeChild(需要删除的节点)

  1.克隆节点 cloneNode

    克隆节点, 克隆母体.cloneNode()

    函数接收一个参数,这个参数是一个布尔值,默认false,浅复制, true深度复制

    浅复制:只复制标签

    深度复制:把跟这个标签对象相关的一些标签的行内的信息一起复制,不会复制js里的自定义属性。

  这是我对dom学习的笔记,如果能够帮助到你,我会非常高兴。

Dom属性方法的更多相关文章

  1. jquery获取dom属性方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素

      1.DOM 方法   一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...

  3. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  4. JavaScript中易混淆的DOM属性及方法对比

    JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...

  5. DOM的方法和属性

    HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作. HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值. 编程接口 可通过 JavaScript (以及其他编程 ...

  6. HTML DOM 对象 - 方法和属性

    一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChil ...

  7. Js位置与大小(1)——正确理解和运用与尺寸大小相关的DOM属性

    在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大 ...

  8. HTML DOM 属性 对象

    HTML DOM 属性 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 所有的都是 节点: 文档是文档节点 所有 HTML 元素是元素节点 所 ...

  9. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

随机推荐

  1. 错误代码: 1381 You are not using binary logging

    1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:show master logs 错误代码: 1381 You are no ...

  2. linux下驱动模块化编译,动态加载以及卸载

    步骤:: 1.编写first_driver_hello.c文件,将其放在/linux2.6.32/drivers/char路径下: 2.在/linux2.6.32/drivers/cha/Kconfi ...

  3. ASP.NET 页面双向静态化

    而我们预期的结果应该如下图,实际只请求两次. 用301重定向可以解决该循环请求产生的问题. OK, let's begin. 本文的Demo和Source是基于上一篇的,如果下面的一些文件或文件夹没有 ...

  4. I Hate It HDU - 1754

    很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老师有 ...

  5. js数组使用JSON.stringify()和toString()的区别,JSON.parse

    JSON.stringify()中的<br><br>var arr = [1,2,3,4]; console.log(arr.toString()); // 1,2,3,4 a ...

  6. java 的几种引用

    从JDK1.2版本开始,把对象的引用分为四种级别,从而使程序能更加灵活的控制对象的生命周期.这四种级别由高到低依次为:强引用.软引用.弱引用和虚引用. 1.强引用 本章前文介绍的引用实际上都是强引用, ...

  7. 一篇文章看懂Java并发和线程安全

    一.前言 长久以来,一直想剖析一下Java线程安全的本质,但是苦于有些微观的点想不明白,便搁置了下来,前段时间慢慢想明白了,便把所有的点串联起来,趁着思路清晰,整理成这样一篇文章. 二.导读 1.为什 ...

  8. Java数组的操作方法

    在JDKAPI中,我们可以看到java.util.Arrays类.因为是在util工具包下.所以,方法都是静态的 看看里面有哪些方法是我们平时工作中会使用到的(以 int[] 举例)? 1)binar ...

  9. 快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型

    前言 3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成.这个 Demo 左侧为 ...

  10. canvas练手项目(一)——选取图片

    今天无事可做,在春意盎然的下午突发奇想想做一个关于图片处理的在线网页应用.不要问我为什么做这个,因为我想做!关于这个项目,我想基于canvas来实现,canvas是个好东西,我一直很喜欢,就是我没有做 ...