JavaScript之DOM

阿斯乐
121 阅读4分钟

DOM

Document Object Model 文档对象模型

一个页面是一个文档document，一个标签是一个元素element，一个标签、属性如href a、文本、注释等是一个节点node

getElementById

<body>
    <div id="box">2022-5-30</div>
    <script>
        var test = document.getElementById('box');		// 获得的是一个element元素对象 
        console.log(test);
        console.log(typeof test);
        console.dir(type);
    </script>
</body>

在这里插入图片描述 因为网页从上往下加载，得先有标签，所以script写在标签下面

getElementById(参数) 的参数是(大小写敏感的) 字符串 ，结果获取一个element元素对象 object

getElementsByTagName

getElementsByTagName('标签名') 获取某一类标签，结果是一个伪数组存放所有这类标签以及里面的内容，可以使用length获取长度，但其他数组相关api均无效，所以叫伪数组。

界面中ul下有多个li

var lis = document.getElementsByTagName('li') 获取所有li的伪数组

只要ol下面的li ：

var ol = document.getElementsByTagName('ol');

var lis = ol[0].getElementsByTagName('li');

getElementsByClassName('类名')

getElementsByClassName 根据类名如box查找某个/些元素，返回可以是多个

quertySelector('选择器')

quertySelector 可以查找类选择器也可以查找id选择器还可以查找元素选择器，参数可以是.box #nav li div等，根据不同的选择器查找到相应的元素（标签），但是返回的都是第一个元素对象

quertySelectorAll('选择器')

quertySelectorAll 就可以返回所有元素对象

document.body、documentElement

var bodyEle = document.body；	//获取body标签
 console.log(bodyEle);
 var htmlEle = document.documentElement;//获取所有文档元素
 console.log(htmlEle);

在这里插入图片描述

btn.onclick = function() { xxx }

按钮点击事件

    <button id="btn">点击触发函数</button>
    var btn = document.getElementById('btn');		// 获取事件源
    btn.onclick = function() {						// btn.onclick 绑定事件 注册事件
        console.log('2022-5-31');					// 添加事件处理程序
    }

innerText、innerHTML

获取的元素.innerText = 'xxx' 修改标签里面的内容

		<div id="box">2022-5-30</div>
    		<button id="btn">日期</button>
        
        var btn = document.getElementById('btn');
        var div = document.querySelector('#box');
        btn.onclick = function() {
            var time = getTime();
            div.innerText = time
        }

点击 “日期” 按钮后，时间会加在 后面

在这里插入图片描述

innerHTML会自动识别转换html标签，而innerText不会，只会照常显示。

当标签里嵌套标签，获取的外层标签的innerText是不包含里面的标签的，但会有里面标签的内容。

所以innerHTML 用的多

显示、隐藏密码案例

    <div class="pwd">
        <input type="password" id="inputpwd">
        <img src="images/unvisible.png" alt="" id="eye">
    </div>
<script>
		var inputpwd = document.querySelector('#inputpwd');
        var img = document.querySelector('#eye');
        var flag = 0;
        img.onclick = function() {
            if (flag===0) {
                this.src = 'images/visibility.png'
                inputpwd.type = 'text'
                flag = 1
            }else{
                this.src = 'images/unvisible.png'
                inputpwd.type = 'password'
                flag = 0
            }
        }
</script>

在这里插入图片描述

element.style、element.className

可以通过 元素对象.element.style.(样式 如bc width height等) = 'xxx' 来修改某个元素的行内样式。适用于要修改的样式比较少

也可以是 元素对象.element.className = ' 先写好的类选择器 ' 来修改这个元素的类名，这样会覆盖原类选择器的样式，可以写成 '原类选择器 新类选择器' ， 这样就能保留原来类选择器的样式

onfocus、onblur、onmouseover、onmouseout

onfocus 聚焦事件 onblur 失去焦点事件 onmouseover 鼠标经过 onmouseout 鼠标离开

DOM实现全选、单选 案例


<table>
        <thead>
            <tr>
                <th><input type="checkbox" id="j_cbAll">全选</th>
                <th>商品名称</th>
                <th>价格</th>
           </tr>
        </thead>
        <tbody  id="j_tb">
            <tr>
                <td><input type="checkbox" ></td>
                <td>苹果</td>
                <td>10</td>
            </tr>
            <tr>
                <td><input type="checkbox" ></td>
                <td>香蕉</td>
                <td>5</td>
            </tr>
            <tr>
                <td><input type="checkbox" ></td>
                <td>橘子</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="checkbox" ></td>
                <td>梨</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
<script>
	var checkall = document.getElementById('j_cbAll')
	var checklist = document.getElementById('j_tb').getElementsByTagName('input')
	        // 全选框 
	checkall.onclick = function() {
	    for (let i = 0; i < checklist.length; i++) {    
	    // 用循环将 全选框的选中状态赋值给每个选择的状态
	        checklist[i].checked = checkall.checked     
	        // 一个全选为true 全部单选都为true 
	    }
	}
	for (let i = 0; i < checklist.length; i++) {
	    checklist[i].onclick = function() {
	        var flag = true         // 默认准备让全选是true
	        for (let j = 0; j < checklist.length; j++) {
	            if (!checklist[j].checked) {// 如果有一个没选择 即checked为flase
	                flag = false // 只要有一个没选择 准备让全选赋值为flag 的false
	                break;   // 判断有一个没选 后面的不用判断了，提高效率
	            }
	        }
	        checkall.checked = flag 
	    }            
	}
</script>

请添加图片描述

DOM实现切换tab页案例

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .tab{
            width: 1200px;
            background-color: #fff;
            margin: 0 auto;
            border: 1px solid black;
        }
        .Tabtitle{
            height: 50px;
            background-color: gray;
        }
        .Tabtitle li{
            float: left;
            list-style: none;
            padding: 0 50px;
            font-size: 18px;
            line-height: 50px;
        }
        .Tabtitle li:hover{
            color: rgba(35, 34, 34, 0.5);
            cursor: pointer;
        }
        .current{
            float: left;
            list-style: none;
            padding: 0 50px;
            font-size: 18px;
            line-height: 50px;
            background-color: #fff;
        }
        .item{
            padding: 20px 20px;
            display: none;
        }
</style>
<body>
    <div class="tab">
        <div  class="Tabtitle">
            <ul>
                <li class="current">已通过</li>
                <li>处理中</li>
                <li>未通过</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                已通过部分
            </div>
            <div class="item">
                处理中部分
            </div>
            <div class="item">
                未通过部分
            </div>
        </div>
    </div>

    <script>    
        var lis = document.querySelector('.Tabtitle').querySelectorAll('li')
        var divs = document.querySelector('.tab_con').querySelectorAll('div')
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                for (let i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                    divs[i].style.display = 'none'
                }
                this.className = 'current';
                divs[i].style.display = 'block'
            }            
        }
    </script>
</body>

请添加图片描述

节点操作

nodeType 节点类型

  • 元素节点 nodeType 为1 (用的多)

  • 属性节点 nodeType 为2

  • 文本节点 nodeType 为3 （文本节点包括 文字、空格、换行等 用的少）

nodeName 节点名称

nodeValue 节点值

  • 获取的元素.parentNode 可以得到离这个元素最近的父节点
  • 获取的元素.childNodes 可以得到这个元素的所有子节点，但是包含文本节点，元素节点等等，所以一般不提倡使用。取而代之的是 .children ,这个可以返回所有子元素节点，其余节点不返回（掌握）。用的多
  • firstCild 第一个子节点 包含文本节点，元素节点
  • firstElementChild 才是获取子第一个元素节点的，但又有兼容性问题，所以一般用 .children[0]
  • lastChild 最后一个子节点 包含文本节点、元素节点
  • lastElementChild 才是获取最后一个子元素节点，但又有兼容性问题，所以一般用 .children[父元素.children.length-1]

  • 节点,nextSibling 下个兄弟节点 包括文本节点等所有节点，找不到返回null

  • nextElementSibling 下一个兄弟元素节点 IE9以上兼容

  • 节点.previousSibling 上一个兄弟节点 包括文本节点等所有节点，找不到返回null

  • previousElementSibling 上一个兄弟元素节点 IE9以上兼容

document.createElement 创建节点

  • 获取父元素对象 f，创建子元素对象 如 var li = document.createElement('li')

  • f.appendChild() 括号里面填创建的子元素对象 如li，则从父元素末尾添加li

  • f.insertBefore() 括号里面填创建的子元素对象 如li,f.children[下标] ，从父元素指定位置插入子元素li

removeChild 删除节点

  • 父元素.removeChild(子元素) 删除 ，方法返回值是删除的节点

cloneNode 复制节点

  • node.cloneNode() 括号里面参数可填布尔值 参数为空或者flase则只复制标签不复制里面内容，称 浅拷贝， 如果参数为true则为深拷贝，复制标签及其里面的内容。
avatar
文章
阅读
粉丝