Web API 知识总结

学习视频：https://www.bilibili.com/video/BV1uE411t7FR?p=26

肆

操作元素

一、改变元素内容:

• element.innerText
• element.innerText

二、常用元素的属性操作

• innnerText、innerHTML
• src、href
• id、alt、title

三、表单元素的属性操作

• type、value、checked、selected、disabled

四、样式属性操作

• element.style 行内样式操作
• element.className 类名样式操作
  
  

五、自定义属性的操作
1、获取属性值

• element.属性 获取属性值
• element.getAttribute(’ 属性 ')

区别
element.属性：获取内置属性值（元素本身自带的属性）
element.getAttribute(’ 属性 ')：主要获取自定义的属性

2、数值属性值

• element.属性 = ‘ 值 ’ 设置内置属性值
• element.setAttribute(’ 属性 ', ’ 值 ')

3、移除属性

• element.removeAttribute(’ 属性 ')

六、h5自定义属性
目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
1、data- 开头
2、获取

• 兼容性：element.getAttribute(’ data-index ')
• h5新增：element.dataset.index 或者 element.dataset[ ’ index ’ ] （ ie11）

总结

排他思想

 <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>

伍

节点操作

  网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
  一般地，节点至少拥有nodeType（节点类型），nodeName（节点名称）、nodeValue（节点值）这三个基本属性。

• 节点元素 nodeType为1
• 属性节点 nodetype为2
• 文本节点 nodeType为3（文本节点包含文字、空格、换行等）

一、父级节点：node.parentNode

• parentNode属性返回某节点的父节点，注意是最近的一个父节点
• 如果指定的节点没有父节点则返回null

二、子节点
1、parentNode.childNodes（标准）
返回包含指定节点的子节点集合，该集合为即时更新的集合。（注意：返回值里面包含了所有的子节点，包括元素节点，文本节点1等）

只想获取元素节点，代码如下：

2、parentNode.children（非标准）
只读属性，返回所有的子元素节点
3、parentNode.firstChild：返回第一个子节点，找不到则null。（包含所有子节点）
4、parentNode.lastChild：返回最后一个子节点，找不到则null。（包含所有子节点）
5、parentNode.firstElementChild：返回第一个子元素节点（ie9）
6、parentNode.lastElementChild：返回最后一个子元素节点（ie9）

三、兄弟节点
1、node.nextSibling：返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点
2、node.previousSibling
3、nose.nextElementSibling：返回当前元素的下一个兄弟节点，找不到则返回null。（ie9）
4、node.previousElementSibling

解决兼容性问题：

四、创建节点：document.createElement( ’ tagName ’ )
tagName 指定 HTML 元素 （动态创建元素节点）

五、添加节点
1、node.appendChild( child )
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾，类似于 css 里面的 after 为元素
2、node.insertBefore( child, 指定元素 )
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面，类似于 css 里面的 before 为元素

六、删除节点
node.removeChild( child )：从DOM中删除一个子节点，返回删除的节点

七、复制节点
node.cloneNode()：返回调用该方法的节点的一个副本。
注意
1、如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
2、如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点。

八、替换节点
parentNode.replaceChild( newChild, oldChild )：用指定的节点替换当前的一个子节点，并返回被替换掉的节点。

九、三种创建元素方法的区别

https://blog.csdn.net/weixin_44764873/article/details/105909200

总结

  123