ihtml2document能不能根据id获取dom_年薪百万之路--第五十天 BOM与DOM

BOM与DOM

BOM
	浏览器对象模型  Browser Object Model
		js代码操作浏览器
DOM
	文档对象模型	  Document Object Model
		js代码操作标签

BOM操作

>>>window对象

window对象指代的就是浏览器窗口
window.innerHeight  浏览器窗口的高度
window.innerWidth   浏览器窗口的宽度
window.open('https://www.baidu.com/','','height=400px,width=400px,top=400px,left=400px')    新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
window.close()  关闭当前页面

>>> window子对象

navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

history对象

window.history.back()  回退到上一页
window.history.forward()  前进到下一页
# 对应的就是你浏览器左上方的两个的箭头

location对象

window.location.href	# 获取当前页面的url
window.location.href = url  # 跳转到指定的url
window.location.reload()  # 属性页面

弹出框

alert()       警告框
confirm()     确认框
prompt()     提示框

计时器相关

过一段时间之后触发(一次)  setTimeout  clearTimeout
每隔一段时间触发一次(循环)  setInterval  clearInterval
<script>
    function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数

    clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务


    function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发
    }
    show()
</script>

DOM操作

JavaScript 可以通过DOM创建动态的 HTML：

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

DOM操作需要用关键字document起手

>>>查找标签

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

注意三个方法的返回值是不一样的
  document.getElementById('d1')
  <div id=​"d1">​…​</div>​
  
  document.getElementsByClassName('c1')
  HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection
        
  document.getElementsByTagName('div')
  HTMLCollection(3) [div#d1, div, div, d1: div#d1]
                     
                     
  let divEle = document.getElementsByTagName('div')[1]
  divEle
  <div>​div>div​</div>​

>>>间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

>>>节点操作

通过DOM操作动态的创建img标签

并且给标签加属性

最后将标签添加到文本中

let imgEle = document.createElement('img')  # 创建标签
imgEle.src = '111.png'  # 给标签设置默认的属性
imgEle.appendChild(newnode)  追加一个子节点（作为最后的子节点）
imgEle.insertBefore(newnode,某个节点)  把增加的节点放到某个节点的前边
imgEle.removeChild(要删除的节点)   获得要删除的元素，通过父元素调用该方法删除。
imgEle.replaceChild(newnode, 某个节点);

>>>获取值操作

获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.value
let inputEle = document.getElementById('d1')
inputEle.value
如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
 fileEle.files[0]

>>>class、css操作

let divEle = document.getElementById('d1')
divEle.classList  # 获取标签所有的类属性
divEle.classList.remove('bg_red')  # 移除某个类属性
divEle.classList.add('bg_red')  # 添加类属性
 divEle.classList.contains('c1')  # 验证是否包含某个类属性  ture  false
 divEle.classList.toggle('bg_red')  # 有则删除无则添加

DOM操作css标签样式 统一先用style起手

1.对于没有中横线的CSS属性一般直接使用style.属性名即可

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。

DOM操作操作标签样式 统一先用style起手
  let pEle = document.getElementsByTagName('p')[0]
  pEle.style.color = 'red'
  "red"
  pEle.style.fontSize = '28px'
  "28px"
  pEle.style.backgroundColor = 'yellow'
  "yellow"
  pEle.style.border = '3px solid red'
  "3px solid red"

事件

达到某个事先设定的条件 自动触发的动作

# 绑定事件的两种方式
  <button onclick="func1()">点我</button>
  <button id="d1">点我</button>
  
  <script>
      // 第一种绑定事件的方式
      function func1() {
          alert(111)
      }
      // 第二种
      let btnEle = document.getElementById('d1');
      btnEle.onclick = function () {
          alert(222)
      }
  </script>
script标签既可以放在head内 也可以放在body内
  但是通常情况下都是放在body内的最底部
window.onload = function () {
              // 第一种绑定事件的方式
              function func1() {
                  alert(111)
              }
              // 第二种
              let btnEle = document.getElementById('d1');
              btnEle.onclick = function () {
                  alert(222)
              }
          }