前端学习笔记之HTML DOM操作
2017-03-16 18:19
411 查看
HTML DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。DOM节点类型
文档节点 (document,唯一)元素节点 (那些个标签div,p之类)属性节点(class,src这种)文本节点(插入在p,div内的文本)document中的open()定义和用法
open() 方法可打开一个新文档,并擦除当前文档的内容。语法
document.open(mimetype,replace)
参数 | 描述 |
---|---|
mimetype | 可选。规定正在写的文档的类型。默认值是 "text/html"。 |
replace | 可选。当此参数设置后,可引起新文档从父文档继承历史条目。 |
说明
该方法将擦除当前 HTML 文档的内容,开始一个新的文档,新文档用 write() 方法或 writeln() 方法编写。提示和注释
重要事项:调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 close 方法关闭文档,并迫使其内容显示出来。注释:属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法,因为脚本或事件句柄自身也会被覆盖。function createNewDoc() { var newDoc = document.open("test/html","replace"); var txt = "学习 DOM 非常有趣!"; newDoc.write(txt); newDoc.close(); }
<input type="button" value="打开并写入一个新文档" onclick="createNewDoc()"/>
查找元素方式
//查找id为shanghai的元素var shanghai= docment.getElementById('shanggai');//查找name为city的元素集合var citys = docment.getElementByNames('city');//查找class为btn btn-info的元素集合var buttons = getElementsByClassName('btn btn-info');//在citys对象中查找标签名为li的元素集合var li = citys.getElementsByTagName('li');
改变标签内容和属性
//获取id为"div"的元素var node = document.getElementById('div');//增加或改变元素属性document.getElementById('div').setAttribute("class","window j");//返回节点名称var name = node.nodeName;//返回节点类型var type = node.nodeType;//返回父节点var parent = node.parentNode;//返回子节点集合var childs = node.childNodes;//删除当前节点node.parentNode.removeChild(node);//创建节点var div = document.createElement('DIV');//替换节点(新的节点,被替换的节点)node.parentNode.replaceChild(div, node);//添加子节点node.appendChild(div);
innerText、innerHTML、nodeValue 三者的区别
innerText: 设置或获取位于启始标签和结束标签之间的字符串<div id="div">Hello World</div><input type="text" id="input" />//输出为"Hello World"var div = document.getElementById('div').innerText;//输出为""var input= document.getElementById('input').innerText;innerHTML: 设置或返回位于启始标签和结束标签之间的 HTML文本
<div id="div"><span>Hello World</span></div>//输出为"<span>Hello World</span>"var div = document.getElementById('div').innerHTML;nodeValue: 设置或返回属性节点和文本节点的值。
<div id="div" class="div class"><span id="span">Hello World</span></div>var div = document.getElementById('div');var span = document.getElementById('span');//输出为null,因为div属于元素节点,元素节点是没有值的console.log(div.nodeValue);//输出为"div class" 属性节点是有值的console.log(div.getAttributeNode('class').nodeValue);//输出为"div"console.log(div.getAttributeNode('id').nodeValue);//输出为"Hello World",span实际上有一个子节点,该节点是一个文本节点,//文本节点虽然没有标签,但它依然是一个节点console.log(span.childNodes[0].nodeValue);
中文在线API
http://www.w3cschool.cn/htmldom/htmldom-tutorial.html相关文章推荐
- 前端学习笔记之HTML DOM操作
- jQuery学习笔记:DOM操作(二)——属性、类、HTML、CSS
- javascript学习笔记(九):DOM操作HTML的各种方法使用
- js 操作HtmlDom 学习笔记二
- javascript学习笔记(四):DOM操作HTML
- JavaScript学习笔记之通过DOM操作html
- JavaScript DOM学习笔记5——创建和操作节点
- javascript 学习笔记(一)DOM基本操作
- JQuery学习笔记(二)DOM操作
- jQuery学习笔记之jQuery的DOM操作
- js与dom操作学习笔记3
- javascript 学习笔记 基础篇(2) HTML DOM
- learning jQuery 学习笔记十三(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----复制元素及其它
- jQuery学习笔记[1] jQuery中的DOM操作
- jquery学习笔记二:dom操作
- “黑马程序员”视频学习笔记之dom操作基础
- JavaScript DOM学习笔记5――创建和操作节点
- jQuery 学习笔记之六 (jQuery DOM的操作)
- JS操作的Html控件及其代码→学习笔记
- jQuery学习笔记--jQuery的DOM操作