前端基础 - JavaScript之元素操作
2023-09-11 14:15:41 时间
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代码
相关文章
- JavaScript基础
- 前端基础之JavaScript
- JavaScript之函数基础
- 第一百一十三节,JavaScript文档对象,DOM基础
- html javascript读取 文件内容
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] Data ownership, avoid accidently mutation
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Either Functor
- [Javascript] Decorators in JavaScript
- [Javascript] Redirect the browser using JavaScript
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] JavaScript Array Methods in Depth - push
- JavaScript文件操作(1)-基础
- Javascript面向对象编程(三):非构造函数的继承
- 用Javascript获取页面元素的位置
- 将Chrome调试器里的JavaScript变量保存成本地JSON文件
- 〖大前端 - 基础入门三大核心之JS篇⑤〗- JavaScript中的数据类型之字符串类型
- javascript基础修炼(13)——记一道有趣的JS脑洞练习题
- 【华为OD机试 2023】 简单的解压缩算法(C++ Java JavaScript Python)
- 【 华为OD机试 2023】 九宫格游戏 / 三阶积幻方(C++ Java JavaScript Python)
- JavaScript-保留两位小数
- 浅谈JavaScript中的闭包
- 【前端领域高频笔试面试】—— JavaScript高级相关
- 零基础入门前端--JavaScript 循环结构语句
- JavaScript基础入门全解析(上)
- web前端框架Javascript开发基础之JavaScript作用域