JavaScript学习笔记19

DOM

1、DOM---->Document Object Model （文档对象模型）
2、DOM定义了表示和修改文档所需的方法（对象、这些对象的行为和属性以及这些对象之间的关系）

DOM 对象即为宿主对象，由浏览器厂商定义，用来操作 html和 xml 功能的一类对象的集合。

也又人称DOM是对HTML以及XML的标准编程接口。

xml ==> xhtml ==> html

xml是最早的版本，xml里面的标签是可以自定义的，被js里面的json取代了

dom不能改变css样式表，可以间接改变行间样式的css

---

说的改变不了 css 是指改变不了 css 的样式表，但是可以通过间接方式改变 html 的行间样式来改变

• 找到html的方法：如doucument.getElementByTagName(‘div’)就能把所有的div都选出来，如果想拿到第一个 div，写成 document.getElementsByTagName(‘div’) 后面就要加
  一个[0];就可以实现了
• div.style 选出来代表行间样式，选出来的就是 dom 对象
• js 不能写-，只能用小驼峰方法写。如 background-color 写成 backgroundColor

---

有 dom 操作以后就变成动态交互可以操作的了（你动一下，他给你一个反应）div.onclick 是加一个交互效果的事件监听

    <div></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "red";

        div.onclick = function() {
            this.style.width = "200px";
            this.style.height = "200px";
            this.style.backgroundColor = "green";
            this.style.borderRadius = "50%"
        }
    </script>

---

实现点击一下改变一下

---

---

写个选项卡，点第一个按钮出现第一对应的信息，点第二个按钮，第一个消失，出现第二个的信息(排他思想)

最好用下面这种立即执行函数的写法：

---

写个小方块应用

document.body.appendChild(div);意思是在 body 里面放个div

setInterval(function () {},100);是一个定时器功能，意思是每隔 100 毫秒就执行一次

把上面 setInterval(function){}改成以下样式：

把最上面 setInterval(function){}改成以下样式，可以让定时器停止

---

---

点了加速的按钮以后，移动的速度变快

---

中间有<li img-date=”0”></li>*400，onmouseover 是鼠标滑过变成

把上面的案例，如图去掉边线

---

emmet 插件提供的方法：（打字操作）

div*3

---

div.demo 就是直接设置了 class 名字

---

div.demo#only > p 就是让 div 下面包含一个子元素 p

---

div.demo#only > p[style=’background-color:red;width:100px;height:100px;’]

---

div>(p^span.demo)

---

加内容就用{}花括号div>(p^span.demo{123})

---

ul>li{$}*10 这里面的$代表变量

---

ul>li{$*2}*10

可以看看 emmet 插件教程