javascript基础知识

最新推荐文章于 2024-07-26 20:46:33 发布

置顶流云浅暮

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量172

点赞数

分类专栏： javasctipt 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40176258/article/details/83999122

版权

javasctipt 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

DOM(文档树模型)
HTML DOM 是：
• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

文档：一个网页可以成为文档
节点：网页中所有的内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性
.查看对象类型
对象是有类型的对象是有类型的
typeof 不能获取对象的具体类型，获取对象类型始终返回object
javascript中可以认为构造函数就是对象的类型
打印对象使用的是console.dir()
```
   <a id="link" href="https://www.baidu.com">百度</a>
   <script>
   		var link = document.getElementById('link');
   		//HTMLAnchorElement
   		console.dir(link);
   </script>
```

获取元素
1)根据id获取元素
Id是唯一的，如果id不存在，则返回null（没有此对象）。Id是大小写敏感的，代表了所要查找的元素的唯一id。

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

2)根据标签获取元素

	  //返回的是元素的集合，获取某一项的时候用索引
	  var div = getElementsByTagName('div');

3)根据name获取元素
返回的是一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。指定的元素的子元素会被搜索，不包括元素自己。

		var userName = getElementsByName('userName');

4)根据选择器获取元素

        //返回的是集合
        var div = document.getElementsByClassName('a');
        //HTML5中新增的获取元素的方法
        //query  查询Selector  选择器
        //查找一个元素，如果页面上有多个符合条件的元素，只返回一个
        var div1 = document.querySelector('.a');
        //返回的是NodeList的集合(该方法是IE8以后的)
        var divs = document.querySelectorAll('.a'); 
        var frm = document.querySelector("#frm");
        var texts = frm.querySelectorAll("input[type=text]");

事件
可以给网页上所有可见的元素注册事件
事件三要素
事件源：触发事件的元素如：btn
事件名称：事件如：click
事件处理函数：触发事件之后做的事情
eg：给按钮添加事件

        var btn = document.getElementById('btn');
        //给按钮注册事件
        //on 当什么时候  click 点击
        btn.onclick=function(){
                //匿名函数
                alert("哈哈");
        }

eg：给链接添加事件：

        var link = document.getElementById('link');
        link.onclick=function(){
            alert("哈哈");
            //<a href=""></a>的默认行为是跳转到href指定的链接中
            //取消后续内容（默认行为）的执行
            return false;
        }

【注】取消默认行为的方式：return false;

this
函数中的this —> window对象

function fn(){
            console.log(this);
        }
        fn();     
//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

方法中的this —> 是调用该方法的对象

        var obj = {
            name:'za',
            say:function(){
                console.log(this);
            }
        }
        obj.say();

构造函数中this —> 当前对象
事件处理函数中this —> 触发事件的对象(事件源)

innerHTML和innerText的区别
innerHTML:获取内容时会把标签也获取到。它不是标准的DOM属性。

       //设置内容是，如果内容中有标签，会解析标签
        box.innerHTML="<h2>标题</h2>"

innerText:获取内容时会把标签过滤掉（存在兼容性问题）。

        //设置内容是，如果内容中有标签，会对标签进行转义
        box.innerText="<h2>标题</h2>"

【扩展】
老版本的IE支持innerText，老版本的firefox支持textContent。处理innerText的兼容性问题的方式如下：

//处理innerText和textContent
function getInnerText(element){
    //判断element是否支持innerText
    if(typeof element.innerText === 'string'){
        return element.innerText;
    }else{
        return element.textContent;
    }
}
//设置元素之间的内容
function setInnerText(element,content){
    if(typeof element.innerText === 'string'){
        element.innerText = content;
    }else{
        element.textContent = content;
    }
}

表单元素的属性
value:用于大部分表单元素的内容(option除外)
type:可以获取input标签的类型(输入框或复选框等)
disabled:禁用属性
checked:复选框选中属性
selected:下拉选单选中属性

自定义属性
在chrome中不能使用如下例子所示，当访问对象中不存在的属性，返回undefined。

    <div id="box" stuId = "1">张三</div><a href="#">删除</a>
    <script>
    var box = document.getElementById('box');
    console.log(box.stuId);  //当访问对象中不存在的属性，返回undefined
    </script>

可通过下面的方式来设置/获取自定义属性
① getAttribute()获取标签行内属性
② setArrribute()设置标签行内属性
③ removeAttribute()移除标签行内属性
④ 与element.属性的区别：上述三个方法用于获取任意的行内属性。

<body>
<div id="box" stuId = "1">张三</div><a href="#">删除</a>
<script>
//获取标签自定义属性
    console.log(box.getAttribute('stuId'));
    //设置标签的自定义属性
    box.setAttribute('test','hello');
    //设置标签本身具有的属性
    box.setAttribute('class','bg');
    //移除属性
    box.removeAttribute('test');
    box.removeAttribute('class');
    // 不可以设置标签的自定义属性，但是box对象本身具有了abc属性
    box.abc = 'hello';
    console.log(box.abc);
</script>
</body>

样式操作和类名操作
1). 使用style方式设置的样式在标签行内(注：通过样式属性设置宽高、位置的属性类型是字符串，需加上px)。
this.style获取的仅仅是标签的style中设置的样式，如果标签没有设置style、属性，此时获取的都是空字符。

console.log(this.style);

2). 修改标签的className属性相当于直接修改标签的类名
【注】如果设置的样式属性比较多时，推荐使用class，反之推荐使用style。

        var box = document.getElementById('box');
        //样式操作
        //1 设置类样式
        box.className='box';
        //2 设置行内样式style
        console.dir(box);
        box.style.width = '200px';
        box.style.height = '200px';
        box.style.backgroundColor = 'red';
        //cssText 获取标签的style属性中的字符串
        console.log(box.style.cssText);

3). 类名操作中，元素.className的方式可能会覆盖原有的类选择器。使用时不能替换掉原有的类选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #QR{
        width:50px;
        height:50px;
        background: #ccc;
        position:fixed;
        bottom:100px;
        right:10px;
    }
    .QR img{
        width:50px;
        height:50px;
        opacity: 0.4;
        filter:alpha(opacity=40);
    }
    .QRShow{
        width:100px;
        height:100px;
        background: #ccc;
        position:fixed;
        bottom:55px;
        right:60px;
    }
    .hide{
        display:none;
    }
    .show{
        display:block;
    }
    </style>
    <script>
        window.onload = function(){
            //二维码
            var QR = document.getElementById("QR");
            var QRShow = document.getElementById("QRShow");
            QR.onmouseover = function(){
                QRShow.style.display = "block";
                //QRShow.className="show";    会覆盖原有的类选择器，可通过下面方法解决 
                //QRShow.className="QRShow show"
                //QRShow.className = QRShow.className.replace('hide','show');
            }
            QR.onmouseout = function(){
                QRShow.style.display = "none";
                //QRShow.className='QRShow hide';
                //QRShow.className = QRShow.className.replace('show','hide');
            }
        }
    </script>
</head>
<body>
    <div id="QR" class="QR"><img src="../img/QRCode1.png"></div>
    <div id="QRShow" class="QRShow hide"><img src="../img/QRCode2.jpg" width="100px" height="100px"></div>
</body>
</html>

流云浅暮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础知识

DOM(文档树模型)HTML DOM 是：• HTML 的标准对象模型• HTML 的标准编程接口• W3C 标准HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。文档：一个网页可以成为文档节点：网页中所有的内容都是节点（标签、属性、文本、注释等）元素：网页中的标签...
复制链接

扫一扫

专栏目录