返回首页 | 新开户送体验金的娱乐城

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

[编码]DOM操作

时间:2017-07-31 编辑:admin

DOM常常挂在我们嘴边,但是我们又是否理解它呢?带着这个疑问我开始了

但浏览器显示文档时,它必须将文档的内容与其样式信息结合。分为以下两个阶段处理文档:

浏览器将HTML和CSS转化成DOM(文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。 浏览器显示DOM的内容。

关于DOM

DOM是一种树形结构。标记语言中的每个元素、属性、文本片段都变为一个DOM节点。这些节点由他们与其他DOM节点的关系来定义。

由于HTML和CSS转化成了DOM树,要改变HTML的结构,就需要通过javascript来操作DOM。
操作一个DOM节点有如下几个操作:

更新:更新该节点表示的HTML内容 遍历:遍历该节点下的子节点,然后可以按需操作 添加:在改DOM节点下动态增加一个HTML子节点 删除:把该节点从HTML中删除,删除内容包括几点内容和其下面子节点内容 1、获取节点
var test = document.getElementById('test');
var tr = document.getElementsByTagName('tr');//返回DOM数组
var test_tr = test.getElementsByTagName('tr');//返回DOM数组
var class_tr = document.getElementsByClassName('tr_class');//返回DOM数组
var test_parent = test.parentElement;
var test_parent = test.parentNode;
var next_el = test.nextElementSibling;
var previous_el = test.previousElementSibling;
var test_child = test.children;
var test_first_child = test.firstElementChild;
var test_last_child = test.lastElementChild;
//新方法低版本IE 8不支持
var test = document.querySelector('#test');
var tr = document.querySelectorAll('#test tr');//返回的是DOM数组
2、创建节点
var el = document.createElement('div');//标签
var node_txt = document.createTextNode('hell world');//HTML属性
3、DOM更改
// 添加、删除子元素
test.appendChild(el);
test.removeChild(el);
// 替换子元素
test.replaceChild(el1, el2);
// 插入子元素
var el3 = document.createElement('p');
test.insertBefore(el3, el);
4、属性操作
// 获取一个{name, value}的数组
var attrs = test.attributes;
// 获取、设置属性
var className = test.getAttribute('class');
test.setAttribute('class', 'test_class');
// 判断、移除属性
test.hasAttribute('class');
test.removeAttribute('class');
// 是否有属性设置
test.hasAttributes(); 

vue.js、handlebar.js、react.js等等,DOM操作实质是什么?有什么区别?哪个速度更快性能根好,为什么?


浏览:

网站建设

流程

    网站建设流程