js--dom对象和dom对象利用

dom是什么？

dom就是将html页面酿成js能利用的对象
dom就是网页在js里的换身
js内里选择对应的元素成为dom,利用dom
为什么必要dom呢？

• 访问dom.利用dom,让这个网页动起来
  

dom作用

• 把 HTML 酿成 JS 能认识的对象树
  
• 让 JS 能获取页面元素
  
• 让 JS 能修改页面元素（内容、样式、点击变乱）
  

dom树

可以看到包罗很多的标签
dom节点---节点范例

html文档中的每个身分都是一个节点
节点查找(三个方式)

将html标签转换为js可以利用对象的聚集

通过id举行查找

返回的是一个对象，假如没有找到，返回一个null 空

1.    
2.    

复制代码

通过标署名来举行获取

得到的是一个数组

1.     你好世界
2.     中国   
3.     let b = document.getElementsByTagName("span")   
4.     console.log(b);

复制代码

不管有几个标签都能直接获取到

通过类名举行获取

1.    
2.     <input type="text">
3.     let c = document.getElementsByClassName("box1")   
4.     console.log(c);

复制代码

有没有通用的方式获取了，就是一个方法就能获取到上面三个方式

1.    
2.     // 获取类名   
3.     let d = document.querySelector(".box1")   
4.     // 获取标签   
5.     let e = document.querySelector("span")   
6.     // 获取id   
7.     let x = document.querySelector("#hello")   
8.     console.log(d);   
9.     console.dir(d)   
10.     // 上面就是获取单个标签，不能同时获取到全部的标签   
11.     // 因此的话，利用querySelectorAll 就能获取到全部的标签   
12.     let e = document.querySelectorAll("span")   
13.     console.log(e);

复制代码

获取(dom)后做什么呢

上面已经讲了怎么获取dom，实在就是获取html标签元素，然后对这些举行操
作，样式的修改等等
获取的目标就是可以利用它
修改样式

获取后，返回的是一个对象，这对象内里有很多的键值对，可以对其举行利用，修改颜色等等利用，都在style内里
对象取值的就是对象名.value

1.     你好世界
2.    

复制代码

上面是修改标签内里的样式style内里的
修改文本内容

如今就是必要获取文本内容呢
可以修改文本内容

innerText：不管你是赋值还是取值，只能辨认纯文本
innerHtml：既可以辨认纯文本，也可以辨认标签，保举利用这个

1.     我生病了
2.    

复制代码

修改输入框的内容

修改输入框内里默认的值

获取input对象，内里有一个value可以修改默认值

1.     我生病了
2.    
3.    

复制代码

变乱(页面交互的焦点)

变乱，就是页面上发生的各种活动，js可以监听这些活动，并实验对应的代码
点击按钮后，出现一个弹窗
简朴说： 用户/欣赏器做了某件事，触发变乱，运行你写的代码
变乱的三要素

• 变乱源，变乱被谁触发的
  
• 变乱范例，是一个什么变乱
  
• 变乱处置惩罚步伐，当变乱被触发了，有一个什么样的变乱
  

常见变乱分类

鼠标变乱

• click 点击
  
• dbclick 双击
  
• mouseover 鼠标移入
  
• mouseout 鼠标移出
  
• mousemove 鼠标移动
  

键盘变乱

• keydown 按键按下
  
• keyup 按键松开
  

表单变乱

• input 输入内容
  
• submit 提交
  
• button 按钮
  
• change 内容改变并失去焦点，输入框内容发生改变，就会被触发
  

页面变乱

• load 页面/资源加载完成
  
• resize 窗口巨细改变
  
• scroll 页面滚动
  

案例

点击按钮，出现一个弹窗

1.     <button>这是一个按钮</button>
2.    

复制代码

实现的效果就是点击按钮，出现一个弹窗

点击按钮，让div内里的笔墨发生厘革

1.     <button>这是一个按钮</button>
2.     我是div   

复制代码

实现的效果就是点击这个按钮，div内里的内容就被修改了
change变乱(文本内容如许的)

就是获取输入框的内容，并将内容渲染到页面上
放到h1标签上
回调函数内里有一个默认形参，是一个变乱对象，内里有输入框的内容

1.    
2.     [size=6][/size]
4.    

复制代码

键盘变乱

键盘变乱就是用户按下了某个键就能触发
就是百度搜索，除了百度这个搜索按钮，另有一个回车变乱
为input绑定keydown变乱，
内里有一个对象就是key,对这个key举行判定
案例：输入内容后，按下回车键，弹出对话框

1.    
2.    

复制代码

改进版，登入暗码，弹出登录乐成，并清空输入框内里的内容

1.     密码：<input type="password">
2.    

复制代码

弹出框后，文本内里的内容就会被清空
增补(定时器)

之前我们学习了定时器的内容，就是时间到了，触发一次，另有就是每隔多久实验一次
通过点击变乱制止定时器

1.    

复制代码

每隔2秒实验一次

改进版，点击按钮，制止定时器

1.     <button>点击我，停止定时器</button>
2.    

复制代码

改进版，点击按钮，启动回调函数

1.     <button>点击我，停止定时器</button>
2.    
3.     再次点击，启动定时器   

复制代码

总结

js起首获取到html标签里的对象，dom，将html标签转换成js可以利用的对象聚集
js可以对dom内里做很多利用，样式，文本内容，输入框等等
js另有一个变乱，就是发生了什么变乱，做出对应的利用，这个就是页面交互的焦点
表单的学习下战书学习即可

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.