Web前端JavaScript笔记（4）节点

如何获取元素节点的属性：

在Web前端JavaScript笔记（3）对象中，介绍了访问行间属性的方法，除此之外，系统还提供了三个方法访问元素的属性：

1. setAttribute:

2. getAttribute:

3. removeAttribute:

区别：

1. class属性的访问，class与className的区别

2. 行间的自定义属性，例如在 div中自定义属性，可以通过getAttribute方法访问到，但上一节中介绍的方法不支持自定义属性。

3. setAttribute还可以自定义属性并且进行赋值，其他的方法不支持。

4. 删除标签的属性，其他方法是没办法删除属性的，只能将属性设置为""，而removeAttribute()可以将属性删除。

5. innerHtml 获取标签间的内容，会解析文本

6. innerText 获取标签间的纯文本，不会解析标签，设置纯文本

7. outerHTML 从外标签开始到外标签结束

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let tag = document.getElementById("div1");// 访问行间属性alert(tag.getAttribute("class"));alert(tag.getAttribute("title"));alert(tag.getAttribute("self"));   // 访问自定义属性tag.setAttribute("zx", "over");    // 设置自定义的属性tag.removeAttribute("title");alert(tag.innerHTML);   // 获取标签之间的内容alert(tag.innerText);alert(tag.outerHTML);}</script>
</head>
<body><div id="div1" class="box" title="hello" self="me"><span>content</span></div>
</body>
</html>

获取子节点：

系统提供的访问子节点的方法: （这些子节点共分为三类）

1. childNodes()：访问当前节点下所有的子节点，返回对象数组

2. lastChild()：访问当前节点下最后一个子节点

3. firstChild()：访问当前节点下第一个子节点

4. nextSibling: 当前节点的下一个兄弟节点

5. previousSibling：当前节点的上一个兄弟节点

同时，系统为每个节点提供了三个属性：

	nodeType	nodeName	nodeValue
元素节点	1	标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

当标签出现换行，缩进的时候，系统也会把换行符，空格当作元素属性，所以通过childNodes获取到的元素子结点个数大于实际的子节点个数，可以通过以下的方法来去除这些空白符的影响：

【注】：下面的方法只能获取子结点中的元素节点

1. children ：只获取元素节点

2. firstElementChild：

3. lastElementChild：

4. nextElementSibling：

5. previousElementSibling：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let tag = document.getElementById("div1");alert(tag.childNodes.length);alert(tag.childNodes[0]);alert(tag.childNodes[1]);alert(tag.childNodes[2]);alert(tag.lastChild);// 元素属性：alert(tag.childNodes[0].nodeType);alert(tag.childNodes[1].nodeType);alert(tag.childNodes[2].nodeType);}</script>
</head>
<body><div id="div1" class="box" title="hello" self="me">  <!--换行的时候会把换行符，空格也会算作元素--><em>content</em>节点<strong>new node</strong></div>
</body>
</html>

如何获取元素节点的属性节点：

系统提供了attributes方法用于获取元素节点上的所有属性节点：获取到元素的属性节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let tag = document.getElementById("div1");alert(tag.attributes);alert(tag.attributes.getNamedItem("title"));alert(tag.attributes["title"]);   // 简便写法}</script>
</head>
<body><div id="div1" class="box" title="hello" self="me">  <!--换行的时候会把换行符，空格也会算作元素-->节点</div>
</body>
</html>

DOM的节点操作：

// document.write()会覆盖掉原来页面上的内容

系统提供的节点操作的方法：

1. document.createElement () : 创建节点, 参数：标签名返回值：创建好的标签

2. Node.appendChild(node)：将某一个节点插入当前节点的子节点内

3. document.createTextNode(文本) 创建文本标签（纯文本，即使有标签也不会解析）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let tag_div = document.getElementById("div1");let tag_btn = document.getElementById("btn1");tag_btn.onclick = function () {let tag_p = document.createElement("p");    // 创建一个p标签let text_content = document.createTextNode("hello javascript");tag_p.appendChild(text_content);tag_div.appendChild(tag_p);}}</script>
</head>
<body><div id="div1" class="box"><em>This</em>节点<strong>Content</strong></div><button id="btn1">节点操作</button>
</body>
</html>

每次点击按钮，会添加新的文本标签到div元素中

4. insertBefore() ：格式： box1.parentNode.insertBefore(box2, box1);

功能：将box2添加到box1的前面

5. box1.parentNode.replaceChild(box2, box1); 用box2节点替换box1节点

6. node.cloneNode()：克隆出一个新的node节点，返回值就是新创建的node节点，只克隆节点本身

node.cloneNode(true)：克隆node节点本身以及其所有的子节点

7. box.parent.removeChild(box)：删除box节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let tag_div = document.getElementById("div1");let tag_btn = document.getElementById("btn1");tag_btn.onclick = function () {let tag_p = document.createElement("p");    // 创建一个p标签let text_content = document.createTextNode("hello javascript");tag_p.appendChild(text_content);document.body.replaceChild(tag_p, tag_div);   // 替换节点}}</script>
</head>
<body><div id="div1" class="box"><em>This</em>节点<strong>Content</strong></div><button id="btn1">节点操作</button>
</body>
</html>

节点操作的案例：

实现在输入框中输入内容，点击添加之后可以添加一条记录，点击删除按钮可以删除最后一条记录，点击克隆按钮可以克隆最后一条记录：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let input_tag = $("input_text");let bottom_section = $("bottom");$("add").onclick = function () {let input_content = input_tag.value;if(!input_content){alert("请输入内容");}else{// 开始创建节点let node = document.createElement("div");let text_node = document.createTextNode(input_content);let btn_node = document.createElement("button");let btn_text_node = document.createTextNode("x");btn_node.appendChild(btn_text_node);node.appendChild(text_node);node.appendChild(btn_node);node.style.background = randomColor();bottom_section.appendChild(node);input_tag.value = "";   // 清空输入框updateItemsButtons();}};$("delete").onclick = function () {let last_node = bottom_section.lastChild;bottom_section.removeChild(last_node);updateItemsButtons();};$("clone").onclick = function () {let last_node = bottom_section.lastChild;let clone_node = last_node.cloneNode(true);   // 深拷贝bottom_section.appendChild(clone_node);updateItemsButtons();};function updateItemsButtons() {// 对每条记录上的删除按钮绑定函数let child_nodes = bottom_section.children;  // 只获取div元素节点let btn_arr = [];for(let i=0; i<child_nodes.length; i++){btn_arr.push(child_nodes[i].firstElementChild);//console.log(child_nodes[i].children);}// 对标签绑定事件函数for (let i=0; i<btn_arr.length; i++){// console.log(btn_arr[i]);btn_arr[i].index = i;btn_arr[i].onclick = function () {bottom_section.removeChild(child_nodes[this.index]);}}}}</script><style>#container{width: 200px;border: 1px solid black;}#top{width: 100%;height: 30px;}#top input{height: 20px;line-height: 30px;margin: 0 auto;}#middle{width: 100%;height: 50px;border: none;display: flex;flex-direction: row;justify-content: space-around;background: #0f6674;}#middle button{/*width: 25%;*/height: 50%;align-self: center;/*margin-top: 10px;*/}#bottom{}#bottom div{height: 25px;position: relative;}#bottom div button{position: absolute;top: 1px;right: 2px;}</style>
</head>
<body><div id="container"><div id="top"><input type="text" id="input_text" placeholder="请输入内容"></div><div id="middle"><button id="add">添加</button><button id="delete">删除</button><button id="clone">克隆</button></div><div id="bottom"><!--<div>content<button>x</button></div>--></div></div>
</body>
</html>

选项卡：

实现选项卡切换的时候，呈现选定状态的样式以及下方显示相对应的内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function(){let btn_arr = $("buttons");let buttons = btn_arr.getElementsByTagName("button");let content_box = $("content");let contents = content_box.getElementsByTagName("div");// 为按钮添加事件绑定函数for (let i=0; i<buttons.length; i++){buttons[i].index = i;buttons[i].onclick = function () {for (let j=0; j<buttons.length; j++){buttons[j].className = "";contents[j].style.display = "none";}this.className = "active";contents[this.index].style.display = "block";}}}</script><style>#container{width: 200px;height: 300px;border: 1px solid black;}#container #buttons{height: 30px;}#container #content{border-top: 1px solid black;}.active{background: #00aa88;}</style>
</head>
<body><div id="container"><div id="buttons"><button class="active">python</button><button>Java</button><button>C++</button></div><div id="content"><div style="display: block">欢迎学习python</div><div style="display: none">欢迎学习Java</div><div style="display: none">欢迎学习C++</div></div></div>
</body>
</html>

offset系列方法-快速获取当前页面上的宽，高，距左距离和距右距离:

1. offsetWidth:

2. offsetHeight:

3. offsetLeft:

4. offsetTop:

区别：
通过node.style.width / height获取的是html盒模型中content的大小

offsetWidth / offsetHeight获取的是盒模型中content+padding+border的大小

offsetLeft / offsetTop得到的是距离页面左上角的距离

文档碎片：

利用文档碎片可以大幅提高文档的运行效率:

应用：例如需要在页面上创建10万个节点，将10万个节点全部添加到页面上

提示: 官方提示的计时器： console.time("hh") 代码 console.timeEdn();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function(){//创建十万个节点，没创建一个，插入一个到body中console.time("test1");for (let i=0; i<100000; i++){let new_tag = document.createElement("div");document.body.appendChild(new_tag);}console.timeEnd("test1");     // 官方提供的计时器// // 先创建所有节点，在插入节点console.time("test2");let node = document.createElement("div");    // 先创建一个标签for (let i=0; i<100000; i++){let new_node = document.createElement("div");node.appendChild(new_node);}document.body.appendChild(node);console.timeEnd("test2");     // 官方提供的计时器}</script>
</head>
<body></body>
</html>

第二种方法插入节点的速度更快，称之为文档碎片操作。

数组元素的遍历方法：

1. for循环

2. for-in

3. for-each方法：

<script>window.onload = function(){let arr = [1,4,2,3,4,2];for (let i=0; i<arr.length; i++){console.log(i);}for(let elem in arr){console.log(elem);}arr.forEach(function (item, index, arr) {console.log(item);})}
</script>

------------------------------------------------------------------------------------------------------------------------

Web前端JavaScript笔记（4）节点相关推荐

Web前端Javascript笔记（6）正则表达式
在web前端中,假设用户需要提交表单,在表单提交到服务器进一步处理之前,Javascript程序会检查表单,以确认用户输入的信息是符合规范要求的.这些工作可以使用正则表达式完成,正则表达式是一个描述字 ...
Web前端Javascript笔记（5）事件
1. 什么是事件:事件是指发生并得到处理的操作 JavaScript中的事件是由访问web页面的用户引起的一系列操作,例如,用户的点击操作,JavaScript中有两种事件模型:内联模型,脚本模型. ...
Web前端Javascript笔记（8）Ajax前后端交互
认识Ajax 全名Asynchronous Javascript and XML(异步JavaScript和XML),节省用户操作时间,提高用户体验,减少数据请求,传输获取数据.Ajax相当于前后台数 ...
Web前端JavaScript笔记（5）事件-拖拽
阻止默认行为和超链接在浏览器上运行网页后,右击会弹出菜单,这属于浏览器的默认行为.如何禁止这一默认行为: <script>window.onload = function () {doc ...
Web前端JavaScript笔记（3）对象
在JavaScript中没有类这个概念,只有对象,在新ECMA6新版中增加了类的概念,和数组,字符串类似,对象的声明方法也有三种: 1. 通过new运算符进行传件对象 2. 省略new运算符创建对象 ...
Web前端 Javascript笔记（1）数组
结构 :html构建样式:css控制行为:JavaScript实现什么是JavaScript? JavaScript是一种跨平台的脚本语言,平台,即运行环境,一般指操作系统. --------- ...
Web前端JavaScript笔记（2）字符串
字符串: 字符串的声明方式: 1. 通过new运算符声明字符串 // 声明的是对象 2. 省略new运算符 3. 字符串常量赋值 <script>var str1 = n ...
Web前端JavaScript笔记（7）ECMA6新增数组方法
新增数组方法: 1. Array.from(): 将伪数组转化为真数组 <script>window.onload = function () {let tag_li = documen ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

Web前端JavaScript笔记（4）节点

Web前端JavaScript笔记（4）节点相关推荐

最新文章

热门文章