专栏首页山河木马前端之HTML DOM操作

前端之HTML DOM操作

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);
 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 贝塞尔曲线 原

    transition-timing-function过渡函数,有linear,ease,ease-in,ease-out,ease-in-out,cubic-b...

    山河木马
  • HTML的元素嵌套规则

      address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu...

    山河木马
  • 使用CSS3实现60FPS的移动端动画(转)

    如果您按照我们的提示,您在移动应用程序中使用动画元素会很容易,在其中适当地使用动画元素也会很容易...

    山河木马
  • 网页|扇形菜单—你不get一下吗?

    扇形菜单,就是将导航菜单制作成扇形的形状。简单来说就是通过点击一个按钮,弹出一个以这个按钮为圆心的扇形按钮菜单,(可以根据需要添加按钮个数)。可以通过改变一下半...

    算法与编程之美
  • 展开与折叠菜单动画

    最简单的展开与折叠菜单,一般是通过切换display属性的none和block的值来实现。但是这样会使得整个过程非常的生硬,内容是一瞬间展示给用户,交互过程感觉...

    _kyle
  • CSS3-3D转换

    py3study
  • js获取input上传文件的文件名和扩展名的方法

    使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法:

    德顺
  • JavaScript实现爆炸碎片的 图片切换 效果

    实现这个效果的思路就是,一个大的div元素,设置好一个背景,生成一定数量小的div元素,背景设置成同样的图片,但是每个小div元素的 background-po...

    FEWY
  • css3转换(banner)

    天天_哥
  • 自适应表头和左侧列固定的表格

    在网站建设中,表格的出现提供了数据对比的便利以及数据查看的便利。但是当表格数据过多时,在同一个屏幕下无法完全展示,出现滚动条后,表头部分就被盖住,很容易不清楚看...

    无邪Z

扫码关注云+社区

领取腾讯云代金券