js学习笔记--dom部分(一)
js 学习整理之Dom部分
前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的，然后第三部分BOM部分,后面抽时间再写。
学dom有啥用
1.首先用的最多就是web开发了,js对各种html对象操作,比如我们用到的下拉到底部看完注册条例才能点击下步,改变div元素的各种属性大小颜色之类的,再就是各种事件onclick等一系列，经常用到的动态添加节点等等这些都需要对dom对象进行操作。
2.除了在网页开发的时候需要使用,在做爬虫的时候对网页的分析也需要进行dom操作,比如
获取https://www.cnblogs.com/c-x-a/页面的所以标题,此时我们就需要有一点的获取元素的基础,对于做爬虫来讲其实有三种方案,而更多的还是选择去操作dom对象。
一个是正则表达式,一个是css选择器方式,再就是xpath方式.其中后面的css选择器的方式就需要使用很多选择元素的语句,比如在我们通过getElementsByClassName获取这个元素之后,通过innerText可以获取其值，等等一系列操作,到这里我们就知道了学习js的dom部分重要性了，下面就对最近学到的一些内容做一个总结。
对网页元素的操作
首先我们打开https://www.cnblogs.com/c-x-a/,可以看到所以发布的文章的列表.
通过F12打开开发者工具,我们使用console命令进行下面的一系列操作。
输入下面的内容,然后回车就可以看我们需要的内容了,代码的含义在代码里已经加入注释。
DOM对象操作方式:
// 根据元素的class属性的值获取元素对象。获取的是一个列表
divNodeList = document.getElementsByClassName("postTitle");
//遍历每一个元素并做一系列操作。
for(var a=0;a<divNodeList.length;a++){
v=divNodeList[a]
//childNodes可以获取所有的子元素下标[1]表示获取第二个
//console.log(v.childNodes[1].innerText);
// console.log(v.className); 获取元素的class名
//console.log(v.firstChild); 获取元素的第一个子节点
//console.log(v.childNodes[1].getAttribute("href")); 获取第二个子节点的的href属性，即超链接。
//console.log(v.childNodes[1].getAttributeNode("href"));
/*
getAttribute()：返回属性值，是一个文本字符串
getAttributeNode("属性名"）:返回属性节点，是一个对象
*/
/*
其他用法,具体属性或者方法类似可参考。
http://www.w3school.com.cn/jsref/dom_obj_all.asp
*/
我平时使用的最多的是在console使用xpath命令,下面的结果运行完和上面代码一样的,大家可以自己试试。
Xpath的形式:
//通过xpath获取标题 网站:https://www.cnblogs.com/c-x-a/
//可以作为xpath测试
temp=$x("//div[@class='day']/div[@class='postTitle']/a/text()")
temp.forEach(v=>{
console.log(v.data);
})
上面的代码就是使用一个xpath表达式和一个forEach语句。其中xpath的写法可以有很多种下面的图片就演示了两种xpath语句。
Css选择器的方式:
//document.querySelector css选择器
//只会返回一个结果
var divnode=document.querySelector(".postTitle")
//返回所有符合条件的结果,console中可以用$(),返回一个数组
var divnodes=document.querySelectorAll(".postTitle2") //.表示class，#表示id
divnodes.forEach(v=>{console.log(v.innerText)})
上面三种方式根据自己的喜好选择即可。
一些document对象的使用笔记
笔记1-主要是几个属性的使用
// var body=document.body //获取网页body节点
// console.log(body)
// var all=document.all //获取网页所有元素
// for(var i=0;i<all.length;i++)
// {
// console.log(all[i])
// }
var html=document.documentElement
console.log(html) //html跟标签
笔记2-动态创建元素的方法
//通过write方法可以写内容到html页面上。
document.write("<button id='btn',name='btn'>点我一下</button>");
document.write("<div class='div1'>这是一个div</div>");
var btn=document.getElementById("btn");
#getElementById 根据id获取元素
//根据标签名获取元素结果为列表
var btnTagName=document.getElementsByTagName("button");
console.log(btnName)
var btnName=document.getElementsByName("btn");
console.log(btnName)
var divNode=$$(".div1") //$$等于document.querySelectorAll.在控制台使用时用。
console.log(divNode[0].innerText)
var d=document.getElementsByClassName("div1")[0]
var li=document.createElement("li") //创建一个li元素
var li2=document.createElement("li")
var gzText=document.createTextNode("创建一个文本") //创建一个文本元素
li.appendChild(gzText)#把文本内容加入到li元素里
li2.innerHTML="这是文本2" //除了使用createTextNode创建文本还可以使用innerHTML。
d.appendChild(li)
d.insertBefore(li2,li)#在li元素前面插入li2.后面自动排序。
li.parentNode.removeChild(li) //删除子节点
onclick事件
在html页面的同级目录下创建image文件夹,放5张图格式jpg，从1-5命名即可。
<html>
<head>
<script type="text/javascript">
//加载页面执行
window.onload=function() {
// body...
var img=document.getElementsByTagName('img')[0]
var imgArr=["image/1.jpg","image/2.jpg",
"image/3.jpg","image/4.jpg","image/5.jpg"]
var index=0
var info=document.getElementById("info")
info.innerHTML="共"+imgArr.length+"张图,当前是第"+(index+1)+"张"
prev.onclick=function () {
// 切换到上一张
index--;
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index]
info.innerHTML="共"+imgArr.length+"张图,当前是第"+(index+1)+"张"
}
next.onclick=function () {
index++;
if (index>imgArr.length-1)
{
index=0
}
img.src=imgArr[index]
info.innerHTML="共"+imgArr.length+"张图,当前是第"+(index+1)+"张"
}
}
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="image/1.jpg" alt="没图显示文字" width="400" height="400"></img>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
效果如下
js学习笔记--dom部分(一)的更多相关文章
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
随机推荐
- TCP详解——连接建立与断开
一.报文结构介绍 在开始讲TCP连接过程时,还是先看看TCP报文的格式如图1所示.IP数据报此时由IP头部+TCP头部+TCP数据组成.不带选项的TCP头部是20字节长,而带选项的,TCP头部最长可达 ...
- python并发编程(并发与并行，同步和异步，阻塞与非阻塞）
最近在学python的网络编程,学了socket通信,并利用socket实现了一个具有用户验证功能,可以上传下载文件.可以实现命令行功能,创建和删除文件夹,可以实现的断点续传等功能的FTP服务器.但在 ...
- Linux top、VIRT、RES、SHR、SWAP(S)、DATA Memory Parameters Detailed
catalog . Linux TOP指令 . VIRT -- Virtual Image (KB) . RES -- Resident size (KB) . SHR -- Shared Memor ...
- Web前端框架与移动应用开发第八章
Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...
- MVC实用架构设计（三）——EF-Code First（1）：Repository，UnitOfWork，DbContext
前言 终于到EF了,实在不好意思,最近有点忙,本篇离上一篇发布已经一个多星期了,工作中的小迭代告一段落,终于有点时间来继续我们的架构设计了,在这里先对大家表示歉意. 其实这段时间我并不是把这个系列给忘 ...
- npm离线安装插件
公司内部网络与外部网络隔离,导致npm无法通过npm install安装,只能通过离线安装. 要求: 两台机器(内网一台,外网一台) 两台机器上都已安装好的node和npm 以内网机器安装ftpsyn ...
- Scrapy基础01
一.Scarpy简介 Scrapy基于事件驱动网络框架 Twisted 编写.(Event-driven networking) 因此,Scrapy基于并发性考虑由非阻塞(即异步)的实现. 参考:武S ...
- JDK8新特性03 Lambda表达式03_Java8 内置的四大核心函数式接口
import java.util.ArrayList; import java.util.Arrays; import java.util.List; import java.util.functio ...
- Content Security Policy介绍
Content Security Policy https://content-security-policy.com/ The new Content-Security-Policy HTTP re ...
- idea 2018.1破解激活方法,有效期至2099年
优点:有效期至2099年,不出意外,这辈子肯定够用了 缺点:稍微麻烦些,不过不要紧,为了以后省事,都值了 下面是具体的破解激活步骤: 1. 下载破解补丁文件,路径为:http://idea.lanyu ...