web前端学习(四)JavaScript学习笔记部分(7)-- JavaScript DOM对象控制HTML元素详解
2024-08-23 12:29:17
1、方法
getElementsByName() | 获取name | 可以获取一个数组类型数据(参数加引号) |
getElementsByTagName() | 获取元素 | |
getAttribute() | 获取元素属性 | 获取元素的变量调用这个方法,(参数为元素属性) |
setAttribute() | 设置元素属性 | |
childNodes() | 访问子节点 | 子节点可以有很多个 |
parentNode() | 访问父节点 | 父节点只有一个 |
createElement() | 创建元素节点 | |
createTextNode() | 创建文本节点 | |
insertBefore() | 插入节点 | |
removeChild() | 删除节点 | |
offsetHeight()、offsetWidth() | 网页尺寸 | 不包含滚动条的宽度、高度 |
scrollHeight()、scrollWidth() | 网页尺寸 | 包含滚动条的宽度、高度 |
子节点,父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>节点1</li>阿范德萨发
<li>节点2</li>
<li>节点3</li>
<li>节点4</li></ul>
<script>
function getChildNode(){
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);/*空格区域也算一个节点*/
alert(childnode[1]);/*会打印出节点的类型*/
alert(childnode[1].innerHTML);/*打印出节点的内容*/
alert(childnode[2]);/*打印出内容:object Text*/
alert(childnode[1].nodeType);
}
getChildNode();
</script>
</body>
</html>
appendChild,insertBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function createNode(){
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
body.appendChild(input);/*向body的末尾添加一个元素*/
} function addNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newnode = document.createElement("p");
newnode.innerHTML = "动态添加一个p元素";
div.insertBefore(newnode,node);/*在。。。之前添加一个元素*/
}
createNode();
addNode();
</script>
</body>
</html>
removeNode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function removeNode(){
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[1]);
}
removeNode();/*什么都不输出就对了*/
</script>
</body>
</html>
offsetHeight:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function getSize(){
var width = document.documentElement.offsetWidth||document.documentElement.offsetWidth;
/*这样写会让所有浏览器兼容*/
var height = document.documentElement.offsetHeight;
alert(width+","+height);
}
getSize();/*什么都不输出就对了*/
</script>
</body>
</html>
最新文章
- 关于控件的Invoke(...)方法和BeginInvoke(...)方法的区别
- MySQL判断字段值来确定是否插入新记录
- 新手学习Python时常见的错误
- 【javascript】 for循环小技巧
- hdu 4035 2011成都赛区网络赛E 概率dp ****
- 重新安装了mysql,以前的数据库如何导入到新的数据库
- Python3基础 把一个列表中内容给另外一个列表,形成两个独立的列表
- TreeSet,Comparator
- javaweb学习总结十(xml解析<;SAX以及DOM方式>;)
- [Swust OJ 352]--合并果子(贪心+队列模拟)
- 自绘XP风格菜单
- 设置TabWidget的样式的方法、关联Fragment与tabwidget的方法、点击tab显示相应Fragment方法
- UOJ244 短路 贪心
- Jetty配置
- 8 -- 深入使用Spring -- 3... 资源访问
- React 回忆录(二)为什么使用 React?
- Slack 开发入门之 Incoming Webhooks:往 Slack 的 Channel 中发消息
- tomcat 的缓存机制
- excel——之锁定表头不可编辑
- jQuery 表单元素取值与赋值方法总结