1 JS-DOM和BOM

最新推荐文章于 2022-11-16 10:58:28 发布

SailR

最新推荐文章于 2022-11-16 10:58:28 发布

阅读量89

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40829781/article/details/109781478

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

JS-DOM和BOM

JS-DOM和BOM

事件

var btn1=document.getElemById("");
var btn2=document.getElemByClassName("");//返回列表式
var btn3=document.getElemByTagName("");
var btn4=document.getElemByName("");
var btn5=document.querrySelector("");//匹配到一个就不继续匹配
var btn6=document.querrySelectorAll("");//匹配所有的

//触发事件源
//只有DOM对象才有onclick对象
var btn = document.getElementById("btn");
btn.onclick = function(){
    alert("点我干啥");
};
//或者
btn.onclick = deal;
function deal(){
  alert("点我干啥");  
};
/*
onload事件
	页面加载（文本和图片）完毕的时候
	window.onload可以预防使用标签在定义标签之前
*/
window.onload = function(){
    btn.onclick = deal;
    function deal(){
    alert("点我干啥");  
  };  
}

获取父节点

<body>
    <div>
        <button class="btn">按钮</button>
        <span id="spac">
            <a href="#">百度一下</a>
        </span>
    </div>
    <script>
        window.onload = function(){
            var a  = document.getElementsByTagName("a")[0];
            var parentNode = a.parentNode;
            console.log(a);
            console.log(parentNode);
        }
    </script>
</body>

获取兄弟节点

//下一个兄弟节点
var next = a.nextElementSibling;
//任一各兄弟节点
var previous = a.previousElementSibling;
//获取任意兄弟节点
var mt.parentNode.children[1];

获取所有子节点

//获取第一个子节点
var firstChild = a.firstElementChild;
//获取最后一个节点
var lastChild = a.lastElementChild;
//ChildNodes标准属性，返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
//注意：火狐、谷歌等高版本会把换行也看做子节点
/*
	nodeType == 1 元素节点 
	nodeType == 2 属性节点
	nodeType == 3 文本节点
*/
//获取所有子节点 子节点数组 = 父节点.childNodes;
var box = document.getElementById("box");
var allNodeList = box.childNodes;
var newList[];
for(var i=0;i<allNodeList.length;i++){
	var node = allNodeList[i];
    if(node.nodeType==1){
        newList.push(node);
    }
}

//children 
/*
	非标准属性，返回元素的子元素的集合
	只返回html节点
	获取所有子节点 
	子节点数组 = 父节点.children
	用的最多
*/

节点的增删

//创建节点
var img = document.createElement("img");
img.src = "images/1.jpg";

//增加
box.appendChild(img);
box.insertBefore(img,btn);
//删除
var btn = document.getElementById("btn");
btn.remove();

节点的属性

//新节点 = 要复制的节点.cloneNode(参数)

//深拷贝
box.cloneNode(true);
//浅拷贝 只拷贝一层，不拷贝box的子节点
box.cloneNode(false);

        // 节点属性（节点.属性）
        var img = document.getElementsByTagName("img")[0];

        // 1. 获取：getAttribute(名称)
        /*console.log(img.getAttribute("src"));
        console.log(img.getAttribute("alt"));
        console.log(img.src);
        console.log(img.alt);*/

        // 2. 设置：setAttribute(名称, 值)
        img.setAttribute("src", "img/img2.jpg");
        img.setAttribute("alt", "图片");
        img.setAttribute("aaaa", "哈哈哈哈");
        img.setAttribute("bbbb", "呵呵呵呵");

        // console.log(img.getAttribute("aaaa"));

        // 3. 删除：removeAttribute(名称)
        img.removeAttribute("src");
        img.removeAttribute("aaaa");
        img.removeAttribute("bbbb");
    }

图片切换

<body>
    <img id="icon" src="img/icon_01.png" alt="">
    <p></p>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var icon = document.getElementById("icon");
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");

        // 2. 监听按钮的点击
        var maxIndex = 9, minIndex = 1, currentIndex = minIndex;
        prev.onclick = function () {
            if (currentIndex === minIndex){ // 边界值
                currentIndex = maxIndex;
            }else { // 正常情况
                currentIndex --;
            }

            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

            console.log(icon.src);
        };

        next.onclick = function () {
             if (currentIndex === maxIndex){ // 边界值
                 currentIndex = minIndex;
             }else { // 正常情况
                 currentIndex ++;
             }

             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

            console.log(icon.src);
        };
    }
</script>
</body>

图片的显示隐藏

window.onload = function () {
        // 1. 获取事件源和相关的元素
        var btn = document.getElementById("btn");
        var img = document.getElementsByTagName("img")[0];

        // 2.绑定事件
        btn.onclick = function () {
            // 3. 事件的驱动程序
            if(btn.innerText === "隐藏"){
                img.style.display = "none";
                btn.innerText = "显示";
            }else {
                img.style.display = "block";
                btn.innerText = "隐藏";
            }
        }
    }

输入框焦点

window.onload = function () {
        // 1. 获取需要的焦点
        var name = document.getElementById("name");

        // 2. 获得焦点
        name.onfocus = function () {
             this.style.width = '600px';
             this.style.height = '40px';
             this.style.outline = 'none';
             this.style.fontSize = '20px';
        };

        // 3. 失去焦点
        name.onblur = function () {
             this.style.border = '2px solid red';
             this.style.color = 'red';
        };
    }

parseInt

parseInt() 函数可解析一个字符串，并返回一个整数

        // 3. 失去焦点
        name.onblur = function () {
             this.style.border = '2px solid red';
             this.style.color = 'red';
        };
    }

SailR

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1 JS-DOM和BOM

文章目录JS-DOM和BOM事件获取父节点获取兄弟节点获取所有子节点节点的增删节点的属性图片切换图片的显示隐藏输入框焦点parseIntJS-DOM和BOM事件var btn1=document.getElemById("");var btn2=document.getElemByClassName("");//返回列表式var btn3=document.getElemByTagName("");var btn4=document.getElemByName("");var btn5=doc
复制链接

扫一扫