DOM
来源:互联网 发布:云计算怎么用 编辑:程序博客网 时间:2024/06/05 21:50
DOM操作
Document Object Model
题目
DOM是哪种基础的数据结构?
树
DOM操作的常用API有哪些?
获取DOM节点,以及节点的property和Attribute
获取父节点,获取子节点
新增节点,删除节点
DOM节点的attr和property有何区别?
prototype只是一个JS对象的属性的修改
Attribute是对html标签属性的修改
知识点
DOM本质
DOM可以理解为:浏览器吧拿到的html代码,结构化一个浏览器能识别并且js可操作的一个模型而已。
DOM节点操作
获取DOM节点
var div = document.getElementById('div1');
var divList = document.getElementsByTagName('div');
console.log(divList.length);
console.log(divList[0]);
var containerList = document.getElementsByClassName('.container');
var pList = document.querySelectorAll('p')
prototype
var pList = document.querySelectorAll('p');
var p = pList[0];
console.log(p.style.width);
p.style.width = '100px';
console.log(p.className);
p.className = 'p1';
console.log(p.nodeName);
console.log(p.nodeType);
Attribute
var pList = document.querySelectorAll('p');
var p = pList[0];
p.getAttribute('data-name');
p.setAttribute('data-name', 'imooc');
p.getAttribute('style');
p.setAttribute('style', 'font-size:30px;');
DOM结构操作
新增节点
var div1 = document.getElementById('div1');
//添加新节点
var p1 = doument.createElement('p');
p1.innerHTML = 'this is p1';
div1.appendChild(p1); //添加新创建的元素
//移动已有节点
var p2 = document.getElementById('p2');
div1.appendChild(p2);
获取父节点和子节点
var div1 = document.getElementById('div1');
var parent = div1.parentElement;
var child = div1.childNodes;
div.removeChild(child[0]);
删除节点
var div1 = document.getElementById('div1');
var child = div1.childNodes;
div1.removeChild(child[0]);
Document Object Model
题目
DOM是哪种基础的数据结构?
树
DOM操作的常用API有哪些?
获取DOM节点,以及节点的property和Attribute
获取父节点,获取子节点
新增节点,删除节点
DOM节点的attr和property有何区别?
prototype只是一个JS对象的属性的修改
Attribute是对html标签属性的修改
知识点
DOM本质
DOM可以理解为:浏览器吧拿到的html代码,结构化一个浏览器能识别并且js可操作的一个模型而已。
DOM节点操作
获取DOM节点
var div = document.getElementById('div1');
var divList = document.getElementsByTagName('div');
console.log(divList.length);
console.log(divList[0]);
var containerList = document.getElementsByClassName('.container');
var pList = document.querySelectorAll('p')
prototype
var pList = document.querySelectorAll('p');
var p = pList[0];
console.log(p.style.width);
p.style.width = '100px';
console.log(p.className);
p.className = 'p1';
console.log(p.nodeName);
console.log(p.nodeType);
Attribute
var pList = document.querySelectorAll('p');
var p = pList[0];
p.getAttribute('data-name');
p.setAttribute('data-name', 'imooc');
p.getAttribute('style');
p.setAttribute('style', 'font-size:30px;');
DOM结构操作
新增节点
var div1 = document.getElementById('div1');
//添加新节点
var p1 = doument.createElement('p');
p1.innerHTML = 'this is p1';
div1.appendChild(p1); //添加新创建的元素
//移动已有节点
var p2 = document.getElementById('p2');
div1.appendChild(p2);
获取父节点和子节点
var div1 = document.getElementById('div1');
var parent = div1.parentElement;
var child = div1.childNodes;
div.removeChild(child[0]);
删除节点
var div1 = document.getElementById('div1');
var child = div1.childNodes;
div1.removeChild(child[0]);
阅读全文
0 0
- DOM
- DOM
- dom
- dom
- DOM
- dom
- DOM
- DOM
- DOM
- DOM
- DOM
- dom
- dom
- Dom
- dom
- DOM
- DOM
- DOM
- 深入理解JVM(十)——类加载器
- HDU2007
- pat1017
- android项目导入eclipse最后不能点击next和finish
- python3:(unicode error) 'utf-8' codec can't decode
- DOM
- pat乙级1018
- handler机制
- pycharm默认快捷键:
- 蓝牙(BT04A、HC-05) 使用经验
- 7月份的经历+学习总结
- 关于 android service 和 thread
- python代码`if not x:` 和`if x is not None:`和`if not x is None:`使用
- 人生第一道cf的题