博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JSDOM对象控制HTML元素
阅读量:6585 次
发布时间:2019-06-24

本文共 2177 字,大约阅读时间需要 7 分钟。

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

你可能感兴趣的文章
常用的 wget 参数详解
查看>>
MySql删除数据 not in 用法
查看>>
Angular内置指令--通用指令
查看>>
精通Spring+4.x++企业开发与实践之SpEL
查看>>
好博客地址推荐(长期更新)
查看>>
Android零基础入门第43节:ListView优化和列表首尾使用
查看>>
table实现等高的优势
查看>>
oracle 11g dataguard 使用快照实现临时读写
查看>>
阿里云人才市场,百家公司、近千职位等你加入!
查看>>
不同时间阶段的seo优化技术侧重点
查看>>
机器学习概念原理及常用算法
查看>>
Java JDBC直连
查看>>
最近搭阿里云redis集群遇到的坑
查看>>
request方法
查看>>
贷款计算公式——java实现
查看>>
教你给IDEA安装插件
查看>>
在windows上安装curl
查看>>
使用EasyWechat为“WX公众号”增加一个访问统计的方案实现
查看>>
数据库的工具类
查看>>
Spring Cloud Consul综合整理
查看>>