版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88366378
JavaScript之元素操作
元素操作有以下几种类型：
- document.createElement(”标签名”) 创建元素节点
- setAttribute(name,value); 给元素设置属性名和属性值
- document.createNodeText(”文本内容”) 创建文本节点
- appendChild(子元素) 向标签体末尾添加新的子节点
案例：
效果图如下：
点击字后会显示 “点我跳转”
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--需求:点击按钮,没点一下,向div中添加一个超链接-->
<script type="text/javascript">
/*1.给按钮绑定单机事件*/
window.onload = function(){
//获取到按钮,绑定事件
document.getElementById("btn").onclick = add;
}
function add(){
//2.给div添加超链接
//2.1创建一个超链接对象
var aElement = document.createElement("a");//<a></a>
//2.2给aElement属性赋值
aElement.setAttribute("href","03省市联动-原型.html");
//<a href="03省市联动-原型.html"></a>
//2.3创建一个文本节点
var nodeText = document.createTextNode("点我跳转");
//2.4调用aElement的appendChild函数
aElement.appendChild(nodeText);
//<a href="03省市联动-原型.html">点我跳转</a>
//3.添加到div中
document.getElementById("div002").appendChild(aElement);
}
</script>
</head>
<body>
<div id="div002"></div>
<input type="button" id="btn" value="点我呀" />
</body>
</html>
Document对象中的方法：
获得元素：
- getElementById() 通过id属性值获得元素（整个HTML文档id位置） < xxx id=””>
- getElementsByName() 通过name属性值获得所有元素（整个HTML文档中name可能相同）< xxx name=””>
- getElementsByClassName() 通过 class属性值获得所有元素< xxx class=””>
- getElementsByTagName() 通过标签名获得所有的元素< xxx>
创建元素：
- createElement() 创建指定名称的元素
- createTextNode() 创建指定内容的文本节点
创建属性：
- childNodes，获得所有的子节点
- nodeName， 返回节点名称。(标签名)
- nodeType， 返回节点类型。（元素、属性、文本 等）
- nodeValue， 节点的值。（只有文本节点才有该属性）\给元素/标签对象,添加子元素
- appendChild(子元素);
- insertBefore(子元素,兄弟元素) 给当前元素前追加兄弟元素
- insertAfter(子元素,兄弟元素) 给当前元素后追加兄弟元素
- setAttribute(k,v) 给元素设置属性
全局函数: 都是在window下 可以直接调用
- parseFloat();把字符串解析成小数
- parseInt();把字符串解析成整数，他们的返回值都是number
- eval(): 执行js代码