Python学习笔记Day16

目录

• 【DOM】Document Object Model
  • 1、找到标签
  • 2、操作标签
  • 3、文本操作
  • 4、绑定事件
  • 5、样式操作
  • 6、属性操作
  • 7、创建标签
  • 8、提交表单
  • 9、弹窗,定时,刷新
  • 10、事件

【DOM】Document Object Model

1、找到标签

a. 直接找

document.getElementById('i1')             根据ID获取一个标签     ->> <div><div/>
document.getElementsByName('n1')          根据name属性获取标签集合（列表）
document.getElementsByClassName('div')    根据class属性获取标签集合
document.getElementsByTagName('c1')       根据标签名获取标签集合

b. 间接找

tag = document.getElementById('i1')
tag.parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素

2、操作标签

a. innerText

标签.innerText        获取标签中的文本内容
标签.innerText = ""   对标签内部文本进行重新赋值

b. className、classList

标签.className = 'c1'       直接整体做操作
标签.classList              获取样式列表
标签.classList.add('c1')    添加指定样式
标签.classList.remove('c1') 删除指定样式

c. 绑定点击事件

<div onclick='func();'>点我</div>
<div onfocus='func();'>点我</div>
<div onblur='func();'>点我</div>
<script>
    function func(){

    }
</script>

d. checkbox

获取值
checkbox对象.checked
设置值
checkbox对象.checked = true

3、文本操作

.innerText   只获取文本，过滤标签，赋值时识别为字符串
.innerHTML   全部内容
.value      input标签取值赋值
            textarea标签取值赋值
            select标签获取赋值选中值
                （obj.selectedIndex = 1）

4、绑定事件

onclick
onfocus
onblur
新版HTML已支持placeholder="请输入关键字"自动实现onfocus和onblur功能，并且不用写js代码

5、样式操作

.classList #对样式整体进行操作
.style.color ='red';  #直接在标签上添加style

6、属性操作

.setAttribute('name','alex')    #设置属性
.removeAttribute('value')   #移除属性
.attributes     #获取所有索引与属性名的k-v字典

7、创建标签

// 对象方式
var tag = document.createElement('a');
tag.innerText = "wupeiqi";
tag.className = "c1";
tag.href = "http://www.cnblogs.com/wupeiqi";
# var p = '<p></p>'
# p.appendChild(tag);
document.getElementById('i1').appendChild(tag)  # 传入对象
// 字符串方式
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>";
document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);  # 传入字符串
    //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

8、提交表单

配合onclick()可以使任何标签点击提交
document.getElementById('i1').submit()

9、弹窗,定时,刷新

console.log                 输出框
alert                       弹出框
confirm                     确认框，返回True或False
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
// 定时器
obj = setInterval({},5000)  多次定时器
clearInterval(obj)          清除多次定时器
setTimeout({},5000)         单次定时器
clearTimeout()              清除单次定时器

10、事件

样式 结构 行为 相分离
在JS里找到标签，然后.onclick = "function(){}"
this 指针，指向当前调用的对象

• 1.定义时this绑定：

    <input type='button' onclick='ClickOn(this)'>   #直接传入this，指向当前调用的对象
    function ClickOn(self){
        //self 代指当前点击的标签
    }
  

• 2.调用时this绑定：

    <input id='i1' type='button'>
    document.getElementById('i1').onclick = function(){
        //this 代指当前点击的标签
    }
  

• 3.事件监听绑定：

    tag1.addEventListener('click',function(){},false)    #true捕捉，false冒泡
    事件的冒泡（向上）和捕捉（向下）