JavaScript学习笔记系列1。一.JS是什么?

一.什么是Dom?

JavaScript作为Netscape
Navigator浏览器的1部分首次出现在1九九玖年。它最初的设计目的是改正网页的用户体验。 小编:Brendan
Eich

  DOM——>Document Object Model 直接翻译就是文档对象模型。

期初JavaScript被取名称为,LiveScript,后因和Sun公司通力合营,因市镇宣传须求改名JavaScript。后来Sun公司被Oracle收购,JavaScript版权归Oracle全数。

  DOM——>定义了象征和改变文书档案所需的靶子、那么些指标的行事和质量以及这一个目的之间的涉嫌。DOM对象即为宿主对象,由浏览器商家定义,用来操作html和css功用的一类对象的集纳。也可能有人称DOM是对HTML以及XML的正规编制程序接口。说白了正是类型C#对象集合。例如I/0,I/O包括了不少操作文件和流的对象。意思是同样的。

二.浏览器的组成都部队分?

2.如何运用Dom?

1.shell部分

   一.翻看方法。docment.getElementsById()。通过Id获取成分。上面代码实际操作。

2.水源部分:渲染引擎(语法规则和渲染),js引擎,其余模块

    

叁.脚下主流的浏览器以及其基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="MyDiv">
        一小时小超人很帅!
    </div>
<script type="text/javascript">
        var div=document.getElementById('Only')
</script>
</body>
</html>

1.IE   trident

概念了一个div变量,并且经过Id取到Div。接下来在调节台看一下职能。

2.FireFox   Gecko

图片 1

3.Google     webkit/blink

自个儿出口div这几个变量就突显了div。在IE⑧以下的浏览器id是不区分的轻重缓急写。

4.Safrai          Webkit

除了getElementById,还有好两个法子。笔者下边列举下。

5.Opera           Presto

document.getElementById() //成分id
在Ie捌以下的浏览器,不区分id大小写,而且也回到相配name属性的因素

四.js语言与C#对比

getElementsByTagName() // 标签名

Js是解释性的动态语言,C#是编写翻译的静态语言。Js是跨平台的,而且JS是单线程。

getElementsByName();
//IE不扶助需注意,唯有部分标签name可生效(表单,表单元素,img,iframe)

5.js的组成都部队分

getElementsByClassName() // 类名 ->
ie八和ie八以下的ie版本中未有,能够多个class一齐

ECMAScript、DOM、BOM 

querySelector() // css选用器 在ie七和ie七以下的版本中尚无 

近期ES陆比较流行。

querySelectorAll() // css选取器 在ie7和ie7以下的本子中从未

终极来上一张小编照片。

 简单说下querySelector 和 querySelectorAll

图片 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div clas="MyDiv">
            一小时小超人很酷!
        </div>
    <div id="MyDiv">
        一小时小超人很帅!
    </div>

<script type="text/javascript">

        var div=document.querySelector('.MyDiv')

</script>
</body>
</html>

querySelector写法和Css选择器的写法一样。

querySelector和querySelectorAll的区别是一个返回单个,一个返回的是类数组。如果querySelector满足多个只返回第一个。

2.上面的操作是获取了节点。接下来讲讲节点有哪些操作。
   遍历节点树:
  parentNode -> 父节点  (最顶端的parentNode为#document);
  childNodes ->子节点们
  firstChild ->第一个节点
  lastChild ->最后一个节点
   nextSibling->最后一个兄弟节点
  previousSibling->前一个兄弟节点。
  上面我列举的都是节点的属性。我们整个html文档是一个树型的。通过上面的操作我可以遍历整个树,意思就是可以找个整个树上的任意的节点,并且操作。

  遍历元素节点树:
  parentElement->返回当前元素的父元素节点。(IE不兼容)
  children->返回当前元素的子节点元素
   node.childElementCount  === node.children.length当前元素节点的子元素节点个数(IE不兼容)
  firstElementChild -> 返回的是第一个元素节点(IE不兼容)
  lastElementChild->返回的是最后一个元素节点(IE不兼容)
  nextElementSibling/previousElementSiling->返回后一个/前一个兄弟元素节点。(IE不兼容)
 
` 上面2个一个是遍历节点树,一个是遍历元素节点树。这个两个有什么区别呢?首先要了解一个概念就是节点:什么节点?节点定义不仅仅是指我们的html标签,文字,注释都算是节点,还有属性啦比如id,class这些都是。所以两者区别都是知道了。遍历节点,不仅包含html标签。还包含其他的东西。
  而遍历元素节点。则是遍历我们真正需要的元素节点。所以从使用上。我们的遍历元素节点是方便的。但是!注意这里的但是。实际我们使用的是遍历节点树。这是为什么呢?为什么遍历元素节点更方便。因为IE不兼容。只要不兼容。就不好用了。为什么IE这么不一样。
因为那个时期。浏览器是IE的天下。市场份额占了78成。所以他就牛逼啊。就不遵守规则,玩自己的一套。不过后来随着市场份额减少。他也变老实了。下面代码演示以下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="MyDiv">一小时小超人很酷!
     </div>
    <div id="MyDiv1">
        一小时小超人很帅!
    </div>

<script type="text/javascript">

        var div=document.getElementById('MyDiv1')
        var div1=div.previousElementSibling

</script>
</body>
</html>

图片 3

 

 

图片 4

 

网站地图xml地图