JavaScript基础学习（二）

最新推荐文章于 2023-11-29 08:47:53 发布

Jenny_Ghost

最新推荐文章于 2023-11-29 08:47:53 发布

阅读量840

点赞数

文章标签： javascript 前端 webview

本文链接：https://blog.csdn.net/Jenny_Ghost/article/details/122503020

版权

一、利用循环思想为多个标签创建事件（样例）

将多个标签创建为一个伪数组，通过for循环对每个标签创建事件.

通过变换事件可以达到不同的效果。

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>

    <script>
        var btns = document.getElementsByTagName('button')

        for( var i = 0; i < btns.length; i++){
            btns[i].onclick = function(){
                for( var i = 0; i < btns.length; i++){
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'red';
            }
        }
    </script>
</body>

btns[2].onclick时的效果

二、获取、设置、移除自定义属性值

1.获取元素的属性值

1> element.属性

2>element.getAttribute('属性')

<body>
    <div id="iIDd" index="1"></div>
    <script>
        var div = document.querySelector('div');
        //1> element.属性  一般获取的是元素自带的属性（class id等）
        console.log(div.id);
        // 2>element.getAttribute('属性')  获取的可以是自己添加的属性
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>
</body>

2.设置元素的属性值

1>element.id="test"

2>element.setAttribute('index',2) 可以修改自带的属性和自定义的属性

<body>
    <div id="iIDd" index="1"></div>
    <script>
        var div = document.querySelector('div');
        // 1>element.id="test";
        div.id="test";
        // 2>element.setAttribute('index',2)  可以修改自带的属性和自定义的属性
        div.setAttribute('index',2);
        div.setAttribute('class','classn');//这里的className直接写成class
    </script>
</body>

3.元素属性的移除

element.removeAttribute('属性');

三、H5自定义属性

目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库当中

H5规定自定义属性data-开头作为属性名并且赋值 eg.<div data-index = "1"> </div>

获取自定义属性还是使用 element.getAttribute('data-属性名')

四、节点操作

通过节点层级关系来获取元素

一般来说节点至少拥有nodeTyp(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性

元素节点 nodeType为1 属性节点 nodeType为2 文本节点 nodeType 为3（文本节点包括文字空格换行等）节点操作主要操作是元素节点

1.父节点

使用son.parentNode可以直接获取到son元素的父元素也就是样例中的box，得到的是离元素最近的父级节点

<body>
    <div class="box">
        <span class="son">x</span>
    </div>
    <script>
        // 父节点 parentNode
        var son = document.querySelector('.son');
        console.log(son.parentNode);
    </script>
</body>

2.子节点

①获取全部节点

parentNode.childNodes(标准用法)

<body>
    <!-- 子节点 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <script>
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);
    </script>

子节点包括元素节点文本节点等。样例中的文本节点为换行符，而需要专门获取里面的元素节点需要使用循环和 nodeType来判断是否为元素节点，所以一般不使用childNode来获取子节点

②只获取元素节点

而使用parentNode.childern(非标准的使用方法)他只返回所有的元素节点，其他节点（文本节点）不会被返回获取到四个节点全为元素节点

<body>
    <!-- 子节点 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <script>
        var ul = document.querySelector('ul');
        console.log(ul.children);
    </script>

③获取第一个子元素和最后一个子元素

<body>
   <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 实际使用中的常用方法
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length-1]);//表示最后一个
    </script>
</body>

通过伪数组children来获取想要的第n个子元素

3.兄弟节点

node.nextSibling

node.PreviousSibling

<body>
    <div>divv</div>
    <span>spann</span>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextSibling);
        console.log(div.previousSibling);
    </script>
</body>

node.nextElementSibling

node.previousElementSibling

<body>
    <div>divv</div>
    <span>spann</span>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>
</body>

4.创建和添加节点

例如发布评论，发布后需要创建一个标签来放置评论,也称为动态创建元素节点

document.createElement('tagName')；创建

node.appendChild(child);是添加在指定父节点的子节点末端

<body>
    <ul></ul>
    <script>
        var li = document.createElement('li');
        var ul = document.querySelector('ul');
        ul.appendChild(li);
    </script>
</body>

若使用node.insertBefore(child,指定元素)就可以插到指定元素前面

<body>
    <ul>
        <li>111</li>
    </ul>
    <script>
        var li = document.createElement('li');//第三行的li
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        var lli = document.createElement('li');//第一行的li
        ul.insertBefore(lli,ul.children[0]);
    </script>
</body>

5.删除节点

node.removeChild(child);

<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <button>删除</button>
    <script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        btn.onclick = function(){
            if(ul.children.length == 0){
                this.disabled = true;
            }
            else{
                ul.removeChild(ul.children[0]);
            }
        }
        
    </script>
</body>

点击删除会删掉第一个li

6.复制节点

node.cloneNode()//括号内为true为深拷贝为空或者false为浅拷贝只拷贝标签不拷贝内容

<body>
    <ul>
        <li>1</li>
        <li>11</li>
        <li>111</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lii = ul.children[1].cloneNode(true);//()为空为浅拷贝只复制标签不复制内容
        ul.appendChild(lii);
    </script>
</body>

最后一行是拷贝第一行所形成的

五、创建元素方法

1.document.write()

ps.文档流执行完毕会导致页面重绘

document.write('<div>111</div>');

2.innerHTML

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

inner.innerHTML = '<a href = "#">111</a>'

3.document.createElement

var create = document.querySelector('.create');
var a = document.createElement('a');
create.appendChild(a);

使用innerHTML创建元素（采用数组形式拼接）效率会高一点

六、留言板（创建添加删除节点样例）

在文本框输入内容，发布后，先将文本框中的内容赋值给li标签，再在ul标签内添加li标签

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>

    <ul>
    </ul>
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //创建事件
        btn.onclick = function(){
            if(text.value == ''){
                alert('请输入内容');
                return false;
            }
            else{
                //创建元素
                var li = document.createElement('li');
                console.log(text.value);
                li.innerHTML = text.value;//赋值
                //添加元素
                ul.appendChild(li);
                text.value = '';
            }
            
        }
    </script>
</body>

七、事件操作

1.注册事件（像onclick之类的）

1.传统注册事件

之前使用的onclick具有唯一性，同一元素同一事件只能处理一个函数，多的会被覆盖

2.方法监听注册（addEventListener）

addEventListener(事件类型，处理函数，可选参数)

同一元素同一事件可以注册多个事件，多个事件一次执行

<body>
    <button>点击</button>

    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            alert('弹出111');
        })
        btn.addEventListener('click',function(){
            alert('弹出222');
        })
    </script>
</body>

在弹出111后点击确认222也会弹出

2.删除事件（解绑事件）

1.传统删除事件

div标签只能被点击一次

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function(){
            alert(11);
            divs[0].onclick = null;
        }
    </script>
</body>

2.方法监听注册方式

removeEventListener(事件类型，处理函数，可选参数)

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        function fn() {
            alert(222);
            divs[1].removeEventListener('click',fn);
        }
        divs[1].addEventListener('click',fn);
        
    </script>
</body>

这样也可以实现div2只被点击一次

八、DOM结构重新梳理

DOM是文档对象模型，是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口，可以用来改变网页的内容、结构和样式。

DOM使HTML形成一颗DOM树，包括文档（整个页面）、元素（页面中的标签）和节点（页面中的所有内容，包括文档，元素，属性都是节点）

DOM中学习了创建（innerHTML、document.createElement、document.write

增添（appendChild、insertBefore）

删除（removeChild）

修改元素属性（src、href……）修改元素内容（innerHTML、innerText）修改表单元素（value、type、disable）修改元素样式（style、className）

获取元素（getElementById、ByTagName、querySelector、querySelectorAll）

利用节点获取元素（parentNode、children）

获取属性值（getAttribute）设置属性值（setAttribute）移除属性（removeAttribute）

Jenny_Ghost

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础学习（二）

JavaScript利用循环思想为多个标签创建事件（样例）获取、设置、移除自定义属性值节点操作 dom留言板（创建添加删除节点样例）JavaScriptdom事件操作DOM结构梳理操作梳理
复制链接

扫一扫