当前位置: 首页 > news >正文

JSDOM对象控制HTML元素

DOM对象控制HTML元素的方法有:

getElementsByName()--获取name

getElementsByTagName()--获取元素

getAttribute()---获取元素属性

setAttribute()---设置元素属性

childNodes()---访问子节点

parentNode()---访问父节点 (父节点只有一个)

createElement()---创建元素节点

createTextNode()---创建文本节点

insertBefore()---插入节点

removeChild()---删除节点

offsetHeight---网页尺寸

scrollHeight---网页尺寸(含有滚动条)

以下为给种方法测试代码:

</head>
<body>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<a id="aid" title="得到了a元素的属性">hello</a><br/>
<a id="aid2">aid</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script>
//获取name,修改html标签里的内容
function getName(){
var count=document.getElementsByTagName("p");
alert(count.length);
var p=count[2];
p.innerHTML="world";
}
//getName();
//获取元素属性
function getAttr(){
var anode=document.getElementById("aid");
var attr=anode.getAttribute("title");
alert(attr);
}
//getAttr();
//设置属性
function setAttr(){
var anode=document.getElementById("aid2");
anode.setAttribute("title","动态设置a的属性");
var attr=anode.getAttribute("title");
alert(attr);
}
//setAttr();
//访问子节点
function getChildNode(){
var childnode=document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);
alert(childnode[0].nodeType);
}
//getChildNode();
//访问父节点
function getParentNode(){
var div=document.getElementById("pid");
alert(div.parentNode.nodeName);
}
//getParentNode();
//创建节点
function createNode(){
var body=document.body;
var input=document.createElement("input");
input.type="button";
input.value="按钮";
body.appendChild(input);
}
//createNode();
//添加一个新元素
function addNode(){
var div=document.getElementById("div");
var node=document.getElementById("pid");
var newnode=document.createElement("p");
newnode.innerHTML="动态添加一个新元素";
div.insertBefore(newnode,node);
}
//addNode();
//删除节点
function removeNode(){
var div=document.getElementById("div");
var p=div.removeChild(div.childNodes[1]);
}
//removeNode();
//获得屏幕尺寸
function setSize(){
var width=document.body.offsetWidth||document.docunmentElement.offsetWidth;
var height=document.body.offsetHeight;
alert(width+","+height);
}
setSize();
</script>
</body>
</html>

转载于:https://www.cnblogs.com/pinuocaoyan/p/5037029.html

相关文章:

  • NSObject
  • android 环境搭建
  • AJAX 跨域请求 - JSONP获取JSON数据 jsson和jsonp
  • 点击失去焦点的文字
  • mac 终端 常用命令
  • HP ProLiant DL380 G6 服务器 - 清 BIOS 的方法
  • Mysql isam数据库恢复实战
  • A*寻路算法的探寻与改良(二)
  • 让透明div里的文字不透明
  • [原创]好买财富测试环境自动化发布部署系统实践
  • pptpd *** 老是连接不上内网排错
  • stl之map 排序
  • 第三个阶段事后诸葛亮
  • 最全面的常用正则表达式大全
  • Android仿微信朋友圈图片查看器
  • axios 和 cookie 的那些事
  • es6
  • Fundebug计费标准解释:事件数是如何定义的?
  • JS数组方法汇总
  • log4j2输出到kafka
  • Mysql数据库的条件查询语句
  • mysql中InnoDB引擎中页的概念
  • 百度地图API标注+时间轴组件
  • 前端面试之闭包
  • 使用parted解决大于2T的磁盘分区
  • 思考 CSS 架构
  • 文本多行溢出显示...之最后一行不到行尾的解决
  • 我这样减少了26.5M Java内存!
  • 写给高年级小学生看的《Bash 指南》
  • 一个SAP顾问在美国的这些年
  • #NOIP 2014# day.2 T2 寻找道路
  • #经典论文 异质山坡的物理模型 2 有效导水率
  • #图像处理
  • (1)常见O(n^2)排序算法解析
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (NO.00004)iOS实现打砖块游戏(九):游戏中小球与反弹棒的碰撞
  • (windows2012共享文件夹和防火墙设置
  • (十三)Flask之特殊装饰器详解
  • (五)关系数据库标准语言SQL
  • (转)负载均衡,回话保持,cookie
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • (轉貼) 蒼井そら挑戰筋肉擂台 (Misc)
  • .\OBJ\test1.axf: Error: L6230W: Ignoring --entry command. Cannot find argumen 'Reset_Handler'
  • .Net - 类的介绍
  • .NET BackgroundWorker
  • .net core 调用c dll_用C++生成一个简单的DLL文件VS2008
  • .net 后台导出excel ,word
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化
  • .NET 使用配置文件
  • .NET精简框架的“无法找到资源程序集”异常释疑
  • .NET业务框架的构建
  • //解决validator验证插件多个name相同只验证第一的问题
  • @param注解什么意思_9000字,通俗易懂的讲解下Java注解
  • [ CTF ]【天格】战队WriteUp- 2022年第三届“网鼎杯”网络安全大赛(青龙组)