dom编程(小结)

最新推荐文章于 2023-03-31 19:27:00 发布

卡布鲁大怪兽

最新推荐文章于 2023-03-31 19:27:00 发布

阅读量474

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/YangWenYu_lala/article/details/124898309

版权

文章目录

文章目录
js获取元素
1.id获取
2.name属性值获取
3.对应指定标签名获取返回类数组
4.对应指定类名获取

var timer = document.getElementById('time');//1
var boxs = document.getElementsByName('box');//2
var boxs = document.getElementsByTagName('box');//3
var boxs = document.getElementsByClassName('box');//4

document.querySelector(“选择器”) 获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素
document.querySelectorAll(“选择器”) 获取满足条件的所有元素--结果是类数组

var div = document.querySelector("div");
        var list = document.querySelectorAll("li");

(小知识)Array.from().可以将类数组转为数组。
修改元素类名
切换/添加/一处/是否包含

div.classList.toggle("a"); //切换
        div.classList.add("a"); //添加
        div.classList.remove("a"); //移除
        div.classList.contains("a"); //是f否包含

js修改样式
变量.style.属性=“值”;
注意：类似于font-size这种样式需要以驼峰命名法命名
例如div.style.fontSize="100px";
复选框的属性值
checkbox选中时checked为true/未选中为false
操作元素
element.innerrText//改变元素内容
element.innerHTML//改变元素内容识别html标签
修改元素属性值
setAttribute("index", 2) //修改
getAttribute("index") //获取

var div = document.querySelector("div");
        div.setAttribute("index", 2); //修改属性值
        console.log(div.getAttribute("index")); //获取属性值

节点操作
获取节点
parentElement //获取父级节点
a.previousElementSibling; //上一个兄弟元素
a.nextElementSibling; //上一个兄弟元素
ul.children; //所有子元素
ul.firstElementChild; //第一个子元素
ul.lastElementChild; //最后一个子元素

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li id="a">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var a = document.querySelector(".a");
        var li2 = a.previousElementSibling; //上一个兄弟元素
        var li4 = a.nextElementSibling; //上一个兄弟元素
        var ul = a.parentElement; //父级节点
        var list = ul.children; //所有子元素
        var li1 = ul.firstElementChild; //第一个子元素
        var li5 = ul.lastElementChild; //最后一个子元素
    </script>
</body>

表格操作
var row = table.insertRow(1); //在table中创建行
var td = row.insertCell(0); //在row中创建表格

<table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <script>
        var table = document.querySelector("table");
        var row = table.insertRow(1); //在table中创建行
        var td = row.insertCell(0); //在row中创建表格
        td.innerText = "sssss"; //单个表格内容
    </script>

元素节点
var p = document.createElement("p"); //创建一个p标签
big.append(p); //在big尾部添加p
big.insertBefore(p, big.children[0]); //选定位置添加p 在a1的位置添加
a1.remove(); //删除a1节点
var clonbig = big.cloneNode(true); //true为深拷贝包括内容 false是浅拷贝只有标签;
big.replaceChild(clonbig, a2); //替换a2换称克隆的big

<div class="big">
        <div class="a1">
            <h1>a1</h1>
        </div>
        <div class="a2">
            <h1>a2</h1>
        </div>
    </div>
    <script>
        var big = document.querySelector(".big");
        var p = document.createElement("p"); //创建一个p标签
        p.innerHTML = "我是一个p";
        // big.append(p); //在big尾部添加p
        big.insertBefore(p, big.children[0]); //选定位置添加p 在a1的位置添加
        var a1 = document.querySelector(".a1");
        a1.remove(); //删除a1节点
        var clonbig = big.cloneNode(true); //true为深拷贝包括内容 false是浅拷贝 只有标签;
        var a2 = document.querySelector(".a2");
        big.replaceChild(clonbig, a2); //替换a2换称克隆的big
    </script>

注册事件的三种方式
<h1 οnclick="callMe()">事件的监听</h1>
btn.οnclick=function(){}
btn.addEventListener("click",function(){});

<h1 onclick="callMe()">事件的监听</h1>
//第一种
		<button id="btn">点点</button>
		<button id="btn2">点点</button>
		<script>
			// js响应事件由三种监听方式
			function fun(){}
			var btn = document.getElementById("btn");
//第二种
			btn.onclick = fun; //不要圆括号
			btn.onclick =function(){
			}
			var btn2 = document.getElementById("btn2");
//第三种
			btn2.addEventListener("click",callMe)
			btn2.addEventListener("click",function(){})
		</script>