一、javascript组成

        ECMAScript:核心解释器【为我们提供好了最基本的功能:变量声明、函数、语法、运算】。   兼容性:完全兼容。
 
        DoM:文档对象模型【document object Model】,document:操作界面的
                    比如:获取元素、修改样式、创建元素、
 
        BoM: 浏览器对象模型【Browser object Model】,操作浏览器 的,就是window.    
                    window.onload
                    window.alert
                    没有兼容性问题,基本不兼容,兼容不了。
 
二、DoM 
 
            DoM 
                                               document
                                                       |
 
1、    obj.TagName    获取标签名
(所有的字母都是大写的)
 
2、    obj.parentNode//获取父节点。
最大的祖宗是document,再往上就没有了null
3、    obj.childNodes//获取子节点【包括了文本 节点(换行等等)】。
                            节点类型:
                                        标签节点:1
文本节点:3默认的换行。
检测节点的类型。

nodeType:3【文本节点】

nodeType:1【标签节点】

4、    obj.children;//获取子节点。【只包括他 儿子不包括孙子】,是个数组。

 
5、     obj.previousSibling//获取上一个兄弟元素。至兼容ie 6,7,8.
          obj,previousElementSibling//高版本浏览器获得上一个兄弟元素。
 
“||”的妙用:​
如果两个都是真的既是真的。如果第一个是假的才会执行后面的。如果第一个是真的则执行。永远执行最后的那个。
 
var pre=previousElementSibling||oOn.previousSibling//如果一真则真。前面兼容了后面就不执行了。
 

6、    obj.nextSibling;

         obj.nextElementSibling
         var next=nextElementSibling||oOn.nextSibling;//长的写前边。
 
7、   obj.firstElementChild;//兼容高级浏览器
        obj.firstChild;//兼容ie 6 7 8
        var ofirst=obj.firtElementChild||obj.firstChild ;
 
8、    obj.lastElementChild;
         obj.lastChild;
         var la=obj.lastElementChild||obj.lastChild;
 
9、    物体信息3
            obj.offsetWidth:获取盒子模型的宽度   width+padding*2+border*2;
            obj.offsetHeight:获取盒子模型的高度
            obj.offsetLeft:获取元素 距离定位父级的左边距。没有right
            obj.offsetTop:获取元素距离定位父级的上边距。没有 bottom
  obj.offsetParent:获取定位父级。
总结:
    结构的最高父级最大是 document
    定位的最高父级最大是body
 

11、    document.createElement('div');//创建元素

           document.documentElement;//获取html标签。

           父级.appendChild(创建的元素)// 在父级的最后边添加了一个元素。
           父级.insertBefore(你要插入的元素,插入到谁之前);    
         【低版本浏览器父级.children.length==0时插入报错,所以判断】

2.3 js基础--DOM的更多相关文章

  1. JS基础-DOM

    DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用 自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 ...

  2. 05 JS基础DOM

    JS的window对象定时器: window下一些方法: <script> 弹出 window.alert('hello') 返回布尔值 var ret = window.confirm( ...

  3. JS基础DOM篇之二:DOM级别与节点层次?

    通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别       在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...

  4. JS基础DOM篇之一:何为DOM?

    近日在园子看了一篇文章,一位前端负责人问应聘者何为DOM事件流的三个阶段,我当时一看也是懵圈,于是强迫症复发,遂想要搞清楚它.谁知在查资料的过程中发现有好多关于DOM的概念也是模糊不清,便决定继续延伸 ...

  5. JS基础---Dom的基本操作

    DOM的增删改查 增: 1.创建一个元素节点 document.createElement() 创建新的<p> 元素:var para=document.createElement(&qu ...

  6. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  7. JavaScript基础15——js的DOM对象

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

  8. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  9. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

随机推荐

  1. vi/vim使用总结

    第一部份:一般模式可用的按钮说明,光标移动.复制粘贴.搜索取代等 移动光标的方法: h 或 向左箭头键(←) 光标向左移动一个字符 j 或 向下箭头键(↓) 光标向下移劢一个字符 k 或 向上箭头键( ...

  2. CLion中出现错误add_dependencies called with incorrect number of arguments解决

    出现这个错误以后我以为是IDE出现问题了,可是重新启动,打开其他的工程文件以后发现并没有这个错误,但是新建的文件却报错 然后就打开其他工程的Cmake_list.txt文件,发现最后一行是有工程文件夹 ...

  3. ubuntu15.04下安装docker

    ​##获得更多资料欢迎进入我的网站或者 csdn或者博客园 最近听说docker很火,不知道什么东西,只知道是一个容器,可以跨平台.闲来无事,我也来倒弄倒弄.本文主要介绍:ubuntu下的安装,以及基 ...

  4. CSS中#和.的区别

    id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等:用#top的形式来定义: class:用来定义一些比较细节的样式,如具体的一个菜单,一行文字等,用.text的形式来定义. 定义HTML中 ...

  5. spark_flume_mysql 整合

    本人的开发环境: 1.虚拟机centos 6.5 2.jdk 1.8 3.spark2.2.0 4.scala 2.11.8 5.maven 3.5.2     在开发和搭环境时必须注意版本兼容的问题 ...

  6. SqlServer批量插入(SqlBulkCopy、表值参数)

    之前做项目需要用到数据库的批量插入,于是就研究了一下,现在做个总结. 创建了一个用来测试的Student表: CREATE TABLE [dbo].[Student]( [ID] [int] PRIM ...

  7. gitlab 服务器的搭建与使用全过程(二)

    <gitlab操作手册 1.0 > 此手册适用于 Mac 计算机 第一步:根据从管理员得到的用户名和初始密码登陆并修改密码.新密码不得少于8个字符 第二步:在自己的电脑上创建密钥,并提交提 ...

  8. bootstrap的其他

    情境文本颜色 <p class="text-muted">...</p> <p class="text-primary">. ...

  9. svn学习笔记(一)

    一.svn介绍 1.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件.配置文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易 ...

  10. C++_类入门1-对象和类的介绍

    面向对象是(OOP)是特殊的.设计程序的概念性方法:包含以下特性: 抽象: 封装和数据隐藏: 多态: 继承: 代码的可重用性: 为了实现这些特性并且将这些特性组合在一起,C++所做的最重要的改进是提供 ...