DOM(1)

什么是DOM

文档对象模型简称DOM，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式

DOM树

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中的所有标签都是元素，DOM中使用element表示

节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示

注意：DOM把以上内容都看作是对象，也就意味着，上面的内容都有属性和方法

DOM的用法

获取元素

根据ID获取

使用getElementById(字符串)

<div id="time">2021-1-14</div>
<script>
    var timer = document.getElementById('time')
    console.log(timer)//<div id="time">2021-1-14</div>，没有这个标签会返回null
</script>

根据标签名获取

使用getElentmentByTagName方法返回带有指定标签名的对象的集合，以伪数组的形式存储。这就说明我们访问它只需通过索引，如果是访问全部，则通过遍历访问。注意：如果没有这个元素，返回的是空的伪数组

<div>2021-1-14</div>
<div>2021-1-14</div>
<div>2021-1-14</div>
<div>2021-1-14</div>
<div>2021-1-14</div>
<script>
var timer = document.getElementsByTagName('div')
console.log(timer[1])
for(var i=0;i<timer.length;i++){
  console.log(timer[i])
}
</script>

还可以获取某个元素(父元素)内部所有指定标签名的子元素。找出下面第一个ol标签的li标签

<ul>
    <li>你在我心里打了死结</li>
    <li>你在我心里打了死结</li>
    <li>你在我心里打了死结</li>
    <li>你在我心里打了死结</li>
</ul>
<ol>
    <li>找不到你的我，已失去一切</li>
    <li>找不到你的我，已失去一切</li>
    <li>找不到你的我，已失去一切</li>
    <li>找不到你的我，已失去一切</li>
</ol>
<ol id='ol1'>//第二个ol标签的id设为ol1
    <li>找不到你的我</li>
    <li>找不到你的我</li>
    <li>找不到你的我</li>
    <li>找不到你的我</li>
</ol>
<script>
    var ol = document.getElementsByTagName('ol')
    console.log(ol[1].getElementsByTagName('li')[1])
		var ol1=document.getElementsById('ol1')//也可以通过通过名字访问父节点
    console.log(ol1.getElementsByTagName('li')[1])
</script>

注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

通过html5新增的方法获取

getElementByClassName

根据类名返回元素对象集合

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
<script>
    var boxs = document.getElementsByClassName('box')
    console.log(boxs)
</script>

querySelector

根据指定选择器返回第一个元素对象

var boxs = document.getElementsByClassName('box')
console.log(boxs)
var firstBox = document.querySelector('.box')//切记，里面的选择器需要加符号，类加.，id加#
console.log(firstBox)
var nav = document.querySelector('#nav')
console.log(nav)
var li = document.querySelector('li')
console.log(li)

querySelectorAll

返回指定选择器的所有元素对象集合

特殊元素获取

获取body元素

1 2	body=document.body console.log(body)

获取html元素

1 2	html=document.documentElement console.log(html)

事件

事件简单理解是触发——响应机制，网页中的每个元素都可以产生某些可以出发javascript的事件。例如：我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件由三部分组成：事件源、事件类型、事件处理程序。

事件源：事件被触发的对象

事件类型：如何触发。比如鼠标点击or鼠标经过or键盘输入

事件处理程序：通过函数赋值

<button id="btn">唐伯虎</button>
<div>123</div>
<script>
btn.onclick = function() {
alert('点秋香') //函数赋值方式
}
var div = document.querySelector('div')
div.onclick = function() {
alert('我被点击了')
}

常见的鼠标事件

改变元素内容

innerText

//需要添加事件
<button id="btn">显示时间</button>
<div>123456</div>
<script>
    function getDate() {
        var date = new Date
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var dates = date.getDate()
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        var day = date.getDay()
        return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day]
    }
    var btn = document.querySelector('button')
    var div = document.querySelector('div')
    btn.onclick = function() {
        div.innerText = getDate() //可以配合date一起使用返回当前时间
    }
</script>

1
2
3

//不需要添加事件
var p=document.querySelector('p')
p.innertext=getDate()

innerHTML

innerHTML也能完成innerText的功能。那他们有什么区别呢？innerText从起始位置到终止位置的内容，去除html标签，空格和换行去掉。而innerHTML也是从起始位置到终止位置的内容，包括html标签，同时包含空格和换行

<div>123456</div>
<script>
    var div = document.querySelector('div')
    div.innerHTML = '<strong>今天是</strong>2021 1.24'//如果是innerText，strong无法识别，原样输出
</script>

获取元素里面的内容

<div>123456</div>
<p>
    我是文字
    <span>123</span>
</p>
<script>
    var p = document.querySelector('p')
    console.log(p.innerText)//我是文字 123      去掉空格和换行  
    console.log(p.innerHTML)//我是文字          包含空格和换行
													//<span>123</span>
</script>

常用元素的属性操作

src

<button id='dy'>风景1</button>
<button id='dh'>风景2</button>
<img src="dy.jpg">
<script>
var dy = document.getElementById('dy')
var dh = document.getElementById('dh')
var img = document.querySelector('img')
dy.onclick = function() {
    img.src = 'dh.jpg'
}
dh.onclick = function() {
    img.src = 'dy.jpg'
}

value

<button>按钮</button>
<input type="text" value="手机">
<script>
var btn = document.querySelector('button')
var inputs = document.querySelector('input')
btn.onclick = function() {
    inputs.value = '被点击了'
        //表单禁用
        //btn.disabled=true
    this.disabled = true
        //this指向的是事件函数的调用者btn
}
</script>

type

大小、颜色、位置等元素

<style>
  div {
      width: 200px;
      height: 200px;
      background-color: pink;
  }
</style>
</head>
<body>
<div></div>
<script>
  var div = document.querySelector('div')
  div.onclick = function() {
    this.style.backgroundColor = 'purple'
    this.style.width = '250px'
  }
</script>
</body>
//上面的方法适用于属性比较少的，下面的方法以类名赋值，适用元素较多的
<style>
div {//原来的样式类
    background-color: pink;
    width: 100px;
    height: 100px;
    font-size: 50px;
}

.change {//修改的样式类
    background-color: purple;
    color: white;
    font-size: 25px;
    margin-top: 100px;
}
</style>
<body>
<div>文本</div>
<script>
 var test = document.querySelector('div')
  test.onclick = function() {
        this.className = 'change'
    }
</script>
</body>

获得焦点

<body>
<input type="text" value="手机">
<script>
    var text = document.querySelector('input')
//获得焦点
    text.onfocus = function() {
        if (this.value === '手机') {
            this.value = ''
        }
        this.style.color = '#333'
    }
//失去焦点
    text.onblur = function() {
        if (this.value === '') {
            this.value = '手机'
        }
        this.style.color = '#999'
    }
</script>
</body>