Javascript学习笔记（三）

Web APIs及DOM

Web APIs

API :应用程序编程接口 ，是一些预先定义的函数。
Web API: 浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM

DOM是文档对象模型，HTML的标准编程接口。

一个页面是一个文档，页面中所有标签都是元素，网页所有内容都是节点

获取元素

1.根据ID获取

注意事项：
script写在标签下面
参数id是大小写敏感的字符串
返回的是一个元素对象
getElementByld(id)获取

    <div id="time">2023-1-1</div>

    <script>

        var timer = document.getElementById('time');//timer 是对象

        console.log(timer);
        console.dir(timer);//打印我们返回的元素对象 更好的查看里面的属性和方法

    </script>

2.根据标签名获取

通过 getElementsByTagName('标签名')
如果页面中没有这个标签名，返回的是一个空的伪数组
返回的是 获取过来元素对象的集合 以伪数组的形式存储的

    <ul>

        <li>666</li>

        <li>666</li>

        <li>666</li>

        <li>666</li>

        <li>666</li>

    </ul>

    <script>

        var lis = document.getElementsByTagName('li');

        console.log(lis);

    </script>

element（单对象）.getElementsByTagName('标签名')

    <ol id='ol'>
        <li>666</li>
        <li>666</li>
        <li>666</li>
        <li>666</li>
        <li>666</li>
    </ol>
    <script>
var ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li'));
//或者以下方法
var ol =document.getElementsById('ol');
console.log(ol.getElementsByTagName('li'));
</script>

3.根据类名获取元素

document.getElementsByClassName('类名')

4.其他

//通过document.querySelector('选择器') 返回指定选择器的第一个元素对象

//通过document.querySelectorAll('选择器') 返回指定选择器的所有元素对象

5. 获取特殊元素

1.获取body标签

var bodyEl=document.body;
console.dir(bodyEl);

2.获取html标签

var htmlEle=document.documentElement;
console.log(htmlEle);

事件基础

事件是可以被JS检测到的行为
事件有三部分组成：事件源 事件类型 事件处理程序
事件源：事件被触发的对象
事件类型：如何触发 什么事件 鼠标点击触发 还是鼠标经过触发
事件处理程序： 通过一个函数赋值的方式 完成
事例：

    <button id="but">小陈</button>

    <script>

        var button1 = document.getElementById('but');

        button1.onclick = function() {

            alert('爱学习');

        }

    </script>

执行事件的步骤：
1.获取事件源
2.注册事件
3.添加事件处理程序(函数赋值方式)

操作元素

1.改变元素内容

1.element.innerText element是元素或标签名
案例：

    <button>显示系统时间</button>

    <div>某个时间</div>

    <script>

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

        var div1 = document.querySelector('div');

        btn.onclick = function() {

            div1.innerText = '2023-1-2';

        }

    </script>

缺点：
innerText不识别HTML标签 会去除空格和换行 非标准

<div></div>
<script>
var z=document.querySelector('div');
z.innerText='<strong>今天是：</strong>8号';
</script>

2.element.innerHTML 可以设别HTML标签 使用较多 W3C标准

<div></div>
<script>
var z=document.querySelector('div');
z.innerHTML='<strong>今天是：</strong>8号';
</script>

这个两个属性是可读写的 可以获取元素里面的内容

2.常用元素的属性操作

element.属性 来修改

    <button id="ldh">刘德华</button>

    <button id="'zxy">张学友</button>

    <img src=" 6666.jpg"  alt="" title='刘德华'>

    <script>

        var ldh=document.getElementById('ldh');

        var zxy=document.getElementById('zxy');

        var img=document.querySelector('img');

        ldh.onclick=function(){

            img.src='6666.jpg';
            img.alt='';
            img.title='';

        }

        zxy.onclick=function(){

            img.src='777.jpg';
            img.alt='';
            img.title='';

        }

    </script>

3.表单元素的属性操作

    <button>按钮</button>

    <input type="'text" value="输入内容">

    <script>

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

        var input = document.querySelector('input');

        btn.onclick = function() {

            input.value = '被点击了';

            // disabled 想要按钮被禁用

            btn.disabled = true;

            //或者  this.disabled = true;

            // this 指向事件函数的调用者

        }

    </script>

显示与隐藏

        var eye=document.getElementById('eye');

        var pwd=document.getElementById('pwd');

        var flag=0;

        eye.onclick=function(){

            if(flag==0){

                pwd.type='text';

                flag=1;

            }else{

                pwd.type='password';

            }

        }

4.样式属性操作

1.element.style 行内样式操作 样式比较少 功能简单的情况下使用

    <script>

        var div = document.querySelector('div');

        div.onclick = function() {

            this.style.backgroundColor = 'purple';   
            //JS里面的样式采取驼峰命名法   fontSize  backgroundColor
            //JS修改style样式操作，产生的是行内样式，css权重比较高

        }

    </script>

新表单事件 获得焦点事件 onfocus 失去焦点事件onblur

2.element.className 类名样式操作 样式修改多使用多 className会覆盖原来元素的类名

    <script>

        var div = document.querySelector('div');

        div.onclick = function() {

            this.className='change';//把当前元素的类名改为change,先通过css设置.change类的属性
            }

    </script>

排他思想(算法)

案例：

    <button>1</button>

    <button>2</button>

    <button>3</button>

    <button>4</button>

    <button>5</button>

    <script>

        var btns = document.querySelectorAll('button');

        for (var i = 0; i < btns.length; i++) {

            btns[i].onclick = function() {

                for (var j = 0; j < btns.length; j++) {

                    btns[j].style.backgroundColor = '';

                }

                this.style.backgroundColor = 'red';

            }

        }

    </script>

排他思想：1.所有元素全部清除样式
2.给当前元素设置样式

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

5.自定义属性的操作

1.获取元素的属性值

1.element.属性      只能获取内置属性值
2.element.getAttribute('属性')   可获取自定义属性

2.设置属性值

1.element.属性='值'；
2.element.setAttribute('属性'，'值')    主要针对自定义属性

3.移出属性

element.removeAttribute('属性')

6.H5自定义属性

自定义属性：为了保存并使用数据
H5规定自定义属性以 data-开头做为属性名并赋值

获取自定义属性

//常用方法
1.element.getAttributee('属性');
//H5新增的方法  只能获取date-开头的属性
2.element.dateset.index  或者  element.dateset['index']

节点操作

可以利用节点的层次关系获取元素（主要操作元素节点）
节点： nodeType节点类型 nodeName节点名称 nodeValue节点值

元素节点：nodeType=1
属性节点：nodeType=2
文本节点：nodeType=3    文字、空格、换行

节点层级：父子兄关系

1.父级节点

node.parentNode

2.子节点

//注意：childNodes 所有的子节点 包含 元素节点  文本节点等等
parentNode.childNodes(标准)

//要获取childNodes的元素节点需要通过for循环把nodeType==1的节点选出来
//或者通过下面方法实现
parentNode.children(非标准)

parentNode.firstElementChild  获得第一个子元素节点
parentNode.lastElementChild  获得最后一个子元素节点

//或者
parentNode.children[0];   获得第一个子元素节点
parentNode.children[parentNode.children.length-1];  获得最后一个子元素节点

3.兄弟节点

//nextSibling previousSibling     包含元素节点和文本节点
node.nextSibling  返回当前元素的下一个兄弟节点
node.previousSibling   返回当前元素的上一个兄弟节点

//改进
node.nextElementSibling  返回当前元素的下一个兄弟元素节点
node.previousElementSibling   返回当前元素的上一个兄弟元素节点

4.创建、添加节点

document.createElement('tagName')  
//tagName是指定的HTML元素

node.appendChild(child)
// 将一个节点添加到指定父节点的子节点列表末尾

node.insertBefore(child,指定元素)
//将节点添加到指定元素前面

案例：

<body>

    <ul></ul>

    <script>

        var t = document.createElement('li');

        var u = document.querySelector('ul');

        u.appendChild(t);

    </script>

</body>

5.删除节点

node.removeChild(child)
//node是child的父亲！！！

案例：

    <button>删除</button>

    <ul>

        <li>123</li>

        <li>888</li>

        <li>666</li>

    </ul>

    <script>

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

        var ul = document.querySelector('ul');

        var lis = ul.children;

        btn.onclick = function() {

            if (ul.children.length == 0) {

                this.disabled = true;

            }

            ul.removeChild(ul.children[0]);

        }

    </script>

6.克隆节点

node.cloneNode()  把node节点拷贝一份

//如果括号参数为空或false，是浅拷贝，只克隆复制节点本身，不克隆里面的子节点
//括号里面是true，则是深拷贝

7.三种动态创建元素的区别

document.write()
//document.write()直接将内容写入页面的内容流，但文档流执行完毕，会导致页面全部重绘

element.innerHTML
//效率高(不要拼接字符串，采用数组的形式)

document.createElement()
//效率低一些，但结构清晰