js语法：DOM操作

DOM

DOM全称是 Document Object Model，也就是文档对象模型。

DOM事件

DOM同时两种事件模型：冒泡型事件和捕获型事件

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发  
  
  
触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)  
捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确

上面例子触发的顺序是：document、div

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

BOM

BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

两者关系

document对象：实际上是window对象的属性，document == window.document为true，是唯一一个既属于BOM又属于DOM的对象

• DOM 是为了操作文档出现的 API，document 是其的一个对象；

• BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

DOM元素

DOM节点数组

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。(相当于层级选择器)

用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点：

ar menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i,s,menu,drinks;
menu = document.getElementById('drink-menu');

menu.tagName; // 'DL'
drinks = document.getElementsByTagName('dt');

s = '提供的饮料有:';

for (i=0; i<drinks.length; i++) {

s = s + drinks[i].innerHTML + ',';

}

alert(s);

或者将drinks(伪数组)转化为数组.

DOM选择

    
Java
  
  
Python

    
Ruby
    
Swift
  
  
Scheme

    
Haskell
  

使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：

var js = document.getElementById('test-p');
var arr = document.querySelectorAll('.c-red.c-green > p');
var haskell = document.querySelectorAll('.c-green')[1].getElementsByTagName('p')[1];

var js = document.getElementById('test-p');
var arr = document.getElementsByClassName('c-red c-green')[0].children;
var haskell = document.getElementsByClassName('c-green')[1].lastElementChild;

var js = document.getElementById('test-p');
var arr = document.getElementsByClassName('c-green c-red')[0].getElementsByTagName('p');
var haskell = document.getElementsByClassName('c-green')[1].getElementsByTagName('p')[1]

DOM更新

用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击

// 设置HTML:
p.innerHTML = 'ABC  XYZ';

第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

// 设置文本:
p.innerText = '';
// HTML被自动编码，无法设置一个
Enter your name: 

document.cookie; // 'v=123; remember=true; prefer=zh'

    
        
            

            	
相关内容

分享一下我换友情链接的经验
互联网创业心得-有人气不等于有盈利
怎样使网站更新后的内容真实且质量高
如何将SEO转化成RMB
分析：网站策划与网络营销策划的区别
分享二手车网站未经实践的策划方案
编程之代码抽象三原则
红衫网赚：淘宝客结合电子书是如何日赚过百
Google?PR今天早上更新
Struts2实现文件上传功能

            
        
    
    

    	

        
推荐文章
            

        
    	

        
站长推荐
            
搜索引擎营销的第一步是网站架构优化
宠物网站：一个快乐并痛着的样本
进行SEO关键词优化的目的是什么
只有将网站内容做精细 流量才能真正上去
linux下直接拷贝新版本R的方法
判断优化过度常见手段
display: contents;使用方法
实例教你如何鉴定PR真假
drupal8模版宏定义
python正则中最短匹配实现代码
        
        
        

    	

        
热点阅读
            

        
        

        
	




【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。
建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果
Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同