HTML与DOM BOM javascript

zoukankan html css js c++ java

HTML与DOM BOM javascript
1.什么是DOM？

简单说就是DOM规定了HTML，XML等的一些文档映射规范，使JavaScript可以根据这些规范来进行获取元素，在元素上进行各种操作，使得用户页面可以动态的变化，从而大大使页面的交互性增强。而这些文档映射规范我们可以用树来形象的表示:

通过这样的树，我们就可以很快找到我们想要操作的节点，进而进行各种属性，方法，事件等的操作。

注意元素、属性、和内容之间的区别，简单的说，网页上可见的东西叫做内容，内容是被开标签，闭标签抱起来的那部分：<a>我的链接</a>，属性说明元素的特点

2.通过javascript修改DOM

通过javascript修改DOM的例子：
1. //1.获取元素
2. //这里是通过标签获取，同理，你可以通过id获取，通过class获取，也可以先获取父元素，通过父元素的children属性来对其子元素进行操作
3. var x = document.getElementByTagName('a');//通过TagName获取的是标签数组
4. //2.修改元素内容
5. //这里使用的是innerText，还有innerHTML可以使用
6. x[0].innerText="哈哈";//修改数组中第一个a元素的内容为"哈哈"
7. //3.修改它的属性
8. x[0].href="http://www.qq.com"
9. //4.修改它的样式
10. x[0].style.color="blue";
注意：用javascript修改title元素内容的方式有一点特别：

title在html中属于特殊的节点元素.因为它可以使用doucment.getElementsByTagName("title")[0]来获取它的标题,但却无法用doucment.getElementsByTagName("title")[0]用更改它的值.

但是,总有解决的方法. 在javascript中,修改title的方法是：

document.title = 'xxxxxx';

在<body></body>之间的节点元素用document.getElementsByTagName()来获取

document.documentElement代表的是<html></html>中间的所有东西.

js会使用document.title来代替网页的title的原因是，title,head,body等标签是缺省的唯一标签，所以 document.title和document.body可以直接找到结果．

而title是一个结构的标签，也就是说title内，只能加入nodetext．而不能再加别的元素．于是它的使用又具有特殊性．为了不让代码出错．于是js中规定document.title这个对象只有一个属性（也可以说是没有属性）,document.title本身就是document对象的一个属性．而不是它的一个子对象．于用document.title=""来更改title.
通过javascript修改DOM结构,增加元素节点，删除元素节点：
//1.获取元素

//这里是通过标签获取，同理，你可以通过id获取，通过class获取，也可以先获取父元素，通过父元素的children属性来对其子元素进行操作

var x = document.getElementByTagName('a');//通过TagName获取的是标签数组

//2.创建要插入的元素

var haskell = document.createElement('p');

haskell.id = 'haskell';

haskell.innerText = 'Haskell';

//3.在获取元素的内部加入新的元素

//两种方法:1.插到父元素最后appendChild 2.插到指定元素之前insertBefore

x[0].appendChild(haskell);

//尝试用insertBefore准确的插入

//创建新元素

var newTitle = document.createElement('h1');

newTitle.id = 'title1';

newTitle.innerText = '新标题';

//在父元素的指定子元素之前插入

x[0].insertBefore(newTitle,,haskell)
3.DOM事件触发javascript

何为事件冒泡？事件捕获？

事件冒泡指的是：你单击了一个元素，那么该点击事件会传递给它的父元素，再有父元素传递给父元素的父元素．

事件捕获：默认你单击了整个页面，然后慢慢一级级下降，直到你点击的那个元素．

1. HTML事件处理程序:

提示：有意思的编码,如何让HTML显示一个'<'或者'<' ，html编码.如何处理服务器不认识的编码，URI编码

缺点：
由于存在的种种缺点，随后被人们摒弃，成为历史遗迹，人们开始喜欢上用javascript指定事件处理程序,随后带来了DOM0与DOM2

2. DOM0级事件绑定：DOM0时代是Internet Explorer 4.0 与Netscape Navigator 4.0 （后来因为干不过微软索性开源，经过有心人开发，变成了FireFox浏览器）各自按各自的写法的时代，混沌时代.以写事件属性名的方式，格式：on+事件名＝事件处理程序
1. var btn = document.getElementById("myBtn");
2. btn.onclick = function (){
3. // alert('Clicked');
4. alert(this.id);//this指向当前对象
5. }
6. //删除事件处理程序
7. btn.onclick = null;
小插曲：this有什么用
1. var student = {
2. name:"xiaoshan",
3. hello:null,
4. func:function (name) {　　　　//这是一个匿名函数,作为对象的func属性出现
5. this.name = name; //this默认指向当前对象的属性，如果没有那就混乱了,分不清是函数参数和对象参数了，小问题，何为实际参数，何为形式参数？
6. this.hello = function () {
7. alert('Hello, ' + this.name + '!');
8. }
9. }
10. }
11. //问题,请调用fuc函数来修改student的name和hello属性，不用this的情况下
3. DOM2级时代：按标准定义了事件和事件处理的接口,美好的统一写法时代,而且可以在一个元素上挂好多好多事件！DOM２浏览器不一定支持！
1. var btn = document.getElementById("myBtn");
2. btn.addEventListerner("click",function(){
3. alert(this.id);
4. },false);//false表示在事件冒泡的时候触发
5. var handler = function (){
6. alert("hello world!");
7. }
8. btn.addEventListerner("click",handler,false);//再给该元素绑定第二个事件，会在第一个事件执行完后执行．
9. btn.removeEventListerner("click",handler,false);//清除该事件处理程序
IE的事件处理程序
1. var handler = function (){
2. alert("hello world!");
3. }
4. btn.attachEvent("onclick",handler);
5. btn.detachEvent("onclick",handler);
思考：既然写法不一样，如何跨平台？

参考：javascript高级程序设计，第13章

慕课网：DOM事件探秘，http://www.imooc.com/learn/138

4.BOM是什么鬼?
1. document.write("www.dreamdu.com");
2. window.document.write("www.dreamdu.com")
BOM是浏览器的一个标签页，用window对象来表示,可以获取当前页的所有信息,你定义的所有全局变量,实际上是属于window对象的,意思是属于该标签页
1. a = "hello world!";
2. alert(window.a);//会弹出hello world!
1. //获取该标签页的页面大小
2. // 可以调整浏览器窗口大小试试:
3. alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
window.location,由于默认是在window命名空间下,window可以略写

window.location对象表示当前页面的URL信息。例如，一个完整的URL：
```
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
```
可以用location.href获取。要获得URL各个部分的值，可以这么写：
1. window.location.protocol; // 'http'
2. window.location.host; // 'www.example.com'
3. window.location.port; // '8080'
4. window.location.pathname; // '/path/index.html'
5. window.location.search; // '?a=1&b=2'
6. window.location.hash; // 'TOP'
document对象还有一个cookie属性，可以获取当前页面的Cookie。

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。

JavaScript可以通过document.cookie读取到当前页面的Cookie：
```
document.cookie; // 'v=123; remember=true; prefer=zh'
```
由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：
```

<html>
    <head>
        <script src="http://www.foo.com/jquery.js"></script>
    </head>
    ...
</html>
```
如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly,意思为只在http通信时可访问，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。

为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

来自为知笔记(Wiz)
查看全文

相关阅读:
内联模板 C++快速入门46
delphi演示程序
 delphi演示程序
 容器和算法 C++快速入门47
Delphi7_Lite_Fullv7.3优化精简全功能版
 Delphi7_Lite_Fullv7.3优化精简全功能版
 容器和算法 C++快速入门47
[转载 js]alt美化效果
 “谁动了我的奶酪?”的故事
 谁动了我的奶酪[续] 讨论

原文地址：https://www.cnblogs.com/laiqun/p/5645882.html

HTML与DOM BOM javascript

1.什么是DOM？

2.通过javascript修改DOM

3.DOM事件触发javascript

4.BOM是什么鬼?