WebAPI—DOM02

最新推荐文章于 2024-07-23 10:33:08 发布

木木学长

最新推荐文章于 2024-07-23 10:33:08 发布

阅读量84

点赞数

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

本文链接：https://blog.csdn.net/qq_43599049/article/details/114702586

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

排他思想：首先排除其他人，然后才设置自己的样式

var btn = document.getElementsByTagName('button');

for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function() {
        for (var i = 0; i < btn.length; i++) {
            btn[i].style.backgroundColor = '';
        }
        this.style.backgroundColor = 'pink';
    }
}

事件：鼠标经过 onmouseover 鼠标离开 onmouseout

小技巧：如果check全选中，则全选checked=true;

for (var i = 0; i < j_tbs.length; i++) {
    j_tbs[i].onclick = function() {
        var flag = true;
        for (var i = 0; i < j_tbs.length; i++) {
            if (!j_tbs[i].checked) {
                flag = false;
   break;
            }
        }
        j_cbAll.checked = flag;
    }
}

获取元素的属性值

1、element.属性获取内置属性值（元素本身自带的属性）
2、element.getAttribute(‘属性’) 主要获得自定义的属性

设置元素的属性值

1、element.属性 = ‘值’;
2、element.setAttribute(‘属性’,‘值’); 主要针对自定义属性
div.setAttribute(‘class’,‘footer’);//class特殊这里面写的就是class不是className

移除元素的属性值

element.removeAttribute(’’);

自定义属性：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中，H5规定自定义属性data-开头作为属性名并且赋值
h5新增获取自定义属性的方法：div.dataset.index，只能获取以data开头的自定义属性如果自定义属性里面有多个-连接的单词，我们获取的时候采用驼峰命名法

利用节点层级关系获取元素：利用父子兄节点关系获取元素，逻辑性强但兼容性稍差

节点操作：一般节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)

元素节点: nodeType 为1
属性节点: nodeType 为2
文本节点: nodeType 为3(文本节点包含文字、空格、换行等)
node.parentNode; 得到的是离元素最近的一个父节点，如果找不到则返回null
node.childNodes[i].nodeType;
得到所有的子节点，包含元素节点和文本节，如果想要获得里面的元素节点，则需要专门处理，因此不提倡使用childNodes
node.children 获取所有子元素节点，也是实际开发常用的
node.firstChild（第一个节点，不管是文本节点还是元素节点） node.lastChild
node.firstElementChild（第一个子元素节点，IE9以上才支持） node.lastElementChild
兄弟节点：node.nextSibling previousSibling（如果找不到则返回null）
nextElementSibling previousElementSIbilng（IE9以上才支持）

创建节点：
1、创建节点元素节点
var li = document.createElement(‘li’);
2、添加节点
node.appendChild(child) //node 父级 child子级将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child,指定元素) //将一个节点添加到父节点的指定子节点的前面

e.g 实现一个点击按钮添加评论的功能
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>

    <style>
        input {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <input type="text" value="">
    <button>添加</button>
    <ul></ul>
    <script>
        let btn = document.querySelector('button'),
            ul = document.querySelector('ul'),
            input = document.querySelector('input');
        btn.onclick = function() {
            let li = document.createElement('li');
            li.innerHTML = input.value;
            input.value = '';
            ul.appendChild(li);
        }
    </script>
</body>

</html>

删除节点：
node.removeChild(child) //从DOM中删除一个子节点
e.g

var del = document.querySelector('ul');
	var btn = document.querySelector('button');
	btn.onclick = function() {
    		del.removeChild(del.children[0]);
		}

复制节点：
	node.cloneNode()     调用该方法的节点的一个副本

1、如果括号参数为false或空，则为浅拷贝，只复制标签，不复制里面的内容
2、括号里为true，则为深拷贝，复制标签并且复制里面的内容

e.g

	<ul>
	 	<li>1</li>
			<li>2</li>
			<li>3</li>
	</ul>

	<script>
			var ul = document.querySelector('ul');
			var lili = ul.children[0].cloneNode(true);
			ul.appendChild(lili);
	</script>

创建元素方式的区别

  <div class="inner"></div>
    <div class="create"></div>

    <script>
        var inner = document.querySelector('.inner');
        inner.innerHTML = '<a href="#">百度</a>';
        
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        create.appendChild(a);
    </script>

document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂
createElement()创建多个元素效率稍低一点点，但是结构清晰

木木学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPI—DOM02

排他思想：首先排除其他人，然后才设置自己的样式var btn = document.getElementsByTagName('button');for (var i = 0; i < btn.length; i++) { btn[i].onclick = function() { for (var i = 0; i < btn.length; i++) { btn[i].style.backgroundColor = '';
复制链接

扫一扫

专栏目录