JS HTML DOM

最新推荐文章于 2024-09-11 15:33:18 发布

梦道丶

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量131

点赞数

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

本文链接：https://blog.csdn.net/qq_42511085/article/details/103680940

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

dom元素的获取方式

动态获取dom元素

通过TagName获取dom元素

var dom1=document.getElementByTagName("标签名")；
//获取到的dom1为HTMLCollection集合类型，所以在使用时需要使用索引固定到具体标签

通过ClassName获取dom元素

var dom2 = document.getElementByClassName("标签类名");
//获取到的dom2为HTMLCollection集合类型，在使用时需要索引指向具体标签

通过Name获取dom元素

var dom3 = document.getElementByName("name属性名");
//获取到的dom3为NodeList集合类型，使用时同样需要索引指向具体标签

通过Id获取dom元素

var dom4 = document.getElementById("Id名");
//获取到的dom4为单个对象

固定获取dom元素

固定获取方式与动态获取方式的区别：
固定获取方式只能获取到页面初始化完成后的元素，后期动态添加的元素获取不到，而动态获取方式则没有这种限制。

获取一个元素(仅能获取第一个元素)

var query_dom = document.querySelector("CSS选择器");

获取所有元素

var query_all = document.querySelectorAll("CSS选择器");
//获取到的为NodeList集合，使用时需要索引

固定元素的获取方式

获取body元素

console.log(document.body);

获取html元素

console.log(document.docmentElement);

动态创建dom元素

var ele = dcoument.createElement("标签名");
ele.className = "";//为该标签添加类名

dom元素添加事件

事件分类

鼠标事件

click 单击事件
dbclick 双击事件
mousedown 按下鼠标键时触发
mouseup 释放按下的鼠标键时触发
mousemove 鼠标移动事件
mouseover 光标移入事件
mouseout 光标移出事件
mouseenter 移入事件
mouseleave 移出事件

键盘事件

keydown 按下键盘时触发
keyup 松开键盘时触发
keypress 按下有值的键时触发

表单事件

blur 对象失去焦点时触发
focus 对象获得焦点时触发
reset 表单重置时触发

绑定事件的方法

js事件使用时在事件前加上on
1.dom元素直接绑定事件

//在元素内直接添加事件
<button onclick=“msg()” onmousedown()="down()">按钮</button>
//注意：这种方式同类型事件只能绑定一次

2.动态绑定事件

//先获取dom元素
var btn = document.getElementByTagName("button")[0];
//然后绑定事件
btn.onclick= function (){
	console.log("触发了click事件");
}

3.事件的监听

var btn = document.getElementByTagName("button")[0];
btn.addEventListener("click"，method)；
/*addEventListener
*第一个参数为事件类型，第二个参数为具体方法，
*第三个参数为 捕获或冒泡  参数默认为false  冒泡  true  为捕获
*/
function method(){
	console.log("触发了点击事件");
}

//移除事件监听
btn.removeEventListener("click",method);

事件的委托

父元素将事件委托给子元素执行

<html>
<body>
button class="btn">按钮1</button>
<ul>
    <li>子元素</li>
    <p>p元素</p>
</ul>
<script>
	var btn=document.getElementsByClassName("btn")[0];
	var ele_ul=document.getElementsByTagName("ul")[0];
	ele_ul.onclick=function (e){
        var target=e.target|| e.srcElement;
        //字符串大小写转化方法
        //toLowerCase  转换为小写
        //toupperCase  转化为大写
        if(target.nodeName.toLowerCase()==="li")
        {
            console.log("执行代码");
        }
    }
</script>
</body>
</html>

dom元素节点操作

<html>
<body>
<ul>
    <li class="lilist">元素1</li>
    <li class="lilist">元素2</li>
    <li class="lilist">元素3</li>
    <li class="lilist">元素4</li>
    <li class="lilist">元素5</li>
    <li class="lilist">元素6</li>
</ul>
<script>
	var ul_ele = document.getElementsByTagName("ul")[0];//获取父元素
	//父元素.childNodes会获得一个所有子元素的集合，但包含回车符
    for(var i=0;i<ul_ele.childNodes.length;i++)//遍历子元素
       {
           if(ulele.childNodes[i].nodeType==1)
           {
               console.log(ulele.childNodes[i]);
           }
       }

	 var list = document.getElementsByClassName("lilist");

       for (var i = 0; i < list.length; i++) {
           list[i].onclick = function () {
               //节点属性
               console.log(this.nodeName);
               console.log(this.nodeType);//元素节点返回1  文本节点返回3  注释返回8
               console.log(this.childNodes)//返回当前元素的子节点   集合类型
               console.log(this.childNodes[0].nodeValue)//返回当前子节点的节点值

               console.log(this.childNodes[0].parentNode);
           }
       }
</script>
</body>
</html>

通过父节点寻找子节点

<html>
<body>
<ul>
    <li class="lilist">元素1</li>
    <li class="lilist">元素2</li>
    <li class="lilist">元素3</li>
    <li class="lilist">元素4</li>
    <li class="lilist">元素5</li>
    <li class="lilist">元素6</li>
</ul>
<script>
	var ul_ele = document.getElementsByTagName("ul")[0];//获取父元素
	   console.log(ul_ele.childNodes[7].nextSibling);  //nextSibling  下一个节点同胞元素
       console.log(ul_ele.childNodes[7].previousSibling);  //previousSibling  上一个节点同胞元素
       console.log(ul_ele.childNodes[7].nextElementSibling);  //nextElementSibling  下一个同胞元素
       console.log(ul_ele.childNodes[7].previousElementSibling);  //previousElementSibling  上一个同胞元素
       console.log(ul_ele.childNodes[7].parentElement);//获取当前节点的父元素
       console.log(ul_ele.children);//获取当前元素的子元素
       console.log(ul_ele.children[0]);
       console.log(ul_ele.firstChild);//获取的是第一个节点
       console.log(ul_ele.lastChild);//获取的是第一个节点
       console.log(ul_ele.firstElementChild);//获取的是第一个元素
       console.log(ul_ele.lastElementChild);//获取的是第一个元素
       console.log(ul_ele.childElementCount);//获取当前子元素的个数
</script>
</body>
</html>

梦道丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS HTML DOM

dom元素的获取方式动态获取dom元素通过TagName获取dom元素var dom1=document.getElementByTagName("标签名")；//获取到的dom1为HTMLCollection集合类型，所以在使用时需要使用索引固定到具体标签通过ClassName获取dom元素var dom2 = document.getElementByClassName(...
复制链接

扫一扫

专栏目录