DOM简单概要

最新推荐文章于 2022-06-09 09:27:18 发布

MR. Dong

最新推荐文章于 2022-06-09 09:27:18 发布

阅读量154

点赞数

分类专栏：前端文章标签： DOM

本文链接：https://blog.csdn.net/weixin_44614406/article/details/87036271

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Dom

1，查找到标签

根据ID获取一个标签：        document.getElementById('i1')
根据name属性获取标签集合：   document.getElementsByName('n1')
根据标签名获取标签集合：     document.getElementsByTagName('div')
根据class属性获取标签集合：  document.getElementsByClassName('c1')
a，直接找
    document.getElementById
    document.getElementsByName
    document.getElementsByTagName
    document.getElementsByClassName
b，间接找
    tag = document.getElementById('i1')

    parentElement       // 父节点标签元素
    childern            // 所有子标签
    firstElementChild   // 第一个子标签元素
    lastElementChirld   // 最后一个子标签元素
    nextElementSibLing  // 下一个兄弟标签元素
    previousElementSibLing  // 上一个兄弟标签元素

2，操作标签

a，innerText
    获取标签中的文本内容
        标签.innerText

    对标签内部文本进行重新赋值
        标签.innerText = ""
b，className
    tag.className => 直接整体做操作
    tag.classList.add('样式名')    添加指定样式
    tag.classList.remove('样式名') 删除指定样式

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

            }
        </script>

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

3，样式操作

 className
 classList
     classList.add
     classList.remove

 <style>
     .c1{
         font-size:16px;
         color:red;
         ...
     }
 </style>

 <div class='c1 c2' style='font-size:16px;background-color:red;'></div>

 obj.style.fontSize = '16px';
 obj.style.backgroundColor = 'red';
 obj.style.color = 'red';

4，属性操作

attribute
getAttribute
removeAttribute

创建标签，并添加到HTML中：
    a，字符串形式
    b，对象的方式
        document.createElement('div')

提交表单：
    任何标签通过DOM都可以提交表单
    document.getElementById('form').submit()

5，其他

console.log()
alert
var v = confirm(信息)    v:true flase

location.href
location.href = "" # 重定向，跳转
location.reload()   #页面刷新
location.href = location.href  <==> location.reload()

var o1 = setInterval(function(){},5000)
clearInterval(o1)

var o2 = setTimeout(function(){},5000)
clearTimeout(o2)

var obj = setInterval(function(){},5000)
createInterval(obj);

6，事件

onclick,onblur,onfocus

行为 样式 结构 相分离的页面？
js   css html

绑定事件两种方式：
    a,直接标签绑定 onclick='xxx()'   onfocus
    b,先获取DOM对象，然后进行绑定
        document.getElementById('xx').onclick
        document.getElementById('xx').onfocus

this，当前触发事件的标签
    a. 第一种绑定方式
        <input type='button' onclick='ClickOn()'/>
        function ClickOn(self){
            // self 当前点击的标签
        }
    b. 第二种绑定方式
        <input id='i1' type='button'/>
        document.getElementById('i1').onclick = function(){
            // this 代指当前点击的标签
        }
作用域示例：
    var myTrs = document.getElementByTagName("tr");
    var len = myTrs.length
    for(var i=0;i<len;i++){
        // i=0,i=1,i=2
        myTrs[i].onmouseover = function(){
          this.style.backgroundColor = 'red';
        };
    }