Java Script DOM 操作初探

通过获取DOM对象可以进行一些注入操作

1. 用途通过chrome浏览器，进入console 控制可以进行测试操作。
2. 通过增加URL标签，可以添加一些快捷重复填表操作。

书签修改截图样例

1. 通过id获取对象

var t = document.getElementById("app");
console.log(dir(t));
console.log(typeof(t));
alert("this is text");

2. 通过标签名字获取对象数组

   var t = document.getElementsByTagName("div");console.log(t);
   

3. 循环遍历

   for(var i =0;i 

4. 通过object 获取子对象数组

   console.log(t[1].getElementsByTagName("div"))
   

5. 通过类名获取对象数组

console.log(t[1].getElementsByTagName("div"))

6. 通过选择器获取数组

// 返回第一个div对象
var fristObject = document.querySelector('div')
// 返回第一个类对象
var fristObject = document.querySelector('.box')
// 返回第一个id对象
var fristObject = document.querySelector('#box')
//返回所有的div对象
document.querySelectorAll('div')

7. 获取body和html标签

   // 获取body对象
   var body = document.body
   // 获取html对象
   var html = document.documentElement
   
   

8. 鼠标点击事件

// 当鼠标点击任意页面时弹窗
document.body.onclick=function(){alert("this is text")}

9. 修改元素内容

// 修改对象的内容，只是去掉HTML标签，同时去掉空格和换行
document.querySelector(".tit").innerText="这只是一个测试教程"

//修改对象的内容，只是保留html标签，同时保留空格和换行
document.querySelector(".tit").innerHTML="这只是一个测试教程"

// 获取元素内容
document.querySelector(".tit").innerText

10. 获取自定义属性

document.querySelector("img").getAttribute("src")

11. 设置自定义属性

    document.querySelector("img").setAttribute("src", "//test.jpg")
    // 修改class 属性，不是class名字
    div.setAttribute("class","test")
    
    

12. 移除自定义属性

    document.querySelector("img").removeAttribute('src')
    
    

13. H5自定义属性

// data- 开头的是自定义属性，需要使用setAttribute getAttribute 来操作。