js基础 —— 字符串方法、json对象、DOM语法

Mr_Hola

已于 2022-08-02 20:23:58 修改

阅读量119

点赞数

分类专栏： js基础文章标签： json javascript 前端

于 2022-08-02 20:01:01 首次发布

本文链接：https://blog.csdn.net/u010919331/article/details/126128498

版权

js基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、字符串方法

（1）str.charAt（下标）

查找下标并返回下标所在的字符，不会改变原字符串。

（2）str.indexOf（'字符'）

从左往右查找指定字符，查到了就返回该字符第一次出现的下标，不会继续查，没有查到则返回-1，不会改变原字符串

（3）str.lastindexOf（'字符'）

从右往左查找指定字符，查到了就返回该字符第一次出现的下标，不会继续查，没有查到则返回-1，不会改变原字符串

（4）str.substring（'开始下标位置','结束下标位置'）

截取并返回开始到结束前一位字符的长度的字符串，不会改变原字符串

（5）str.split（）

字符串转数组的方法，返回一个数组，不会改变原字符串。

str.split(); //把整个字符串放进一个数组

str.split(''); //把所有字符串都切割放进一个数组

str.split('某种方式切割')，返回数组中，这个切割符号会消掉

（6）str.toUpperCase（）|| str.toLowCase（）

转大小写，不会改变原字符串。

2、json对象

<script>
    var a = 'age';
    var json = {
      name:'张三',
      age:12,
      sex:'女',
      showName:function (){
        alert('张三')
      }
    }

    // json使用方法，获取（新增、修改）值方法如下
    json.showName()
    console.log(json.age) // json.键名
    console.log(json[a])// json.['键名'],[]里面可以放变量，放变量的时候用这种
    // 平时用. 方便简单 但是.后面不能跟变量

    
    删除
        delete  json.键名
        delete  json['键名']

    /*
        json对象是无序的键值对的集合，因为没有下标所以是无序的。json对象可以把具有相同特性的东西放        
      在一起，也可以放方法        
        键值对也叫属性
        这里name、age、sex是键也叫属性名,默认都是字符串，
        张三、12、女是值
    */


    // for in 方法
    for(var key in json){
      console.log(key,json[key])
    }


    /*
      一般for in 用来循环对象，for用来循环数组
    */
</script>

3、JavaScript组成部分

由三部分组成，分别是：ECMAScript、DOM、BOM。

ECMAScript：js的核心语法

版本：ES4 ES5 ES6...（ES5及以下不能兼容低版本浏览器）

运算符、字符串、数组、函数、数据类型、变量、条件、循环、时间对象、json对象等

DOM：document object model 文档对象模型

获取元素 — 修改样式 — 修改属性 — 修改文本

操作html和css，动态访问修改，可对文档的内容、结构、样式进行增删改查。

BOM ：浏览器对象模型

三大弹窗——调试

定时器

4、DOM

4.1 节点树

4.2 获取元素

（1）通过id获取

document.getElementById('id名字');

（2）通过标签名获取

document.getElementsByTagName('标签名')

（3）通过class名

document.getElementsByClassName('class名')

是es5出来的，不兼容ie低版本

（4）通过选择器获取

document.querySelector('#div1 p a'); 获取的是一个

document.querySelectorAll('选择器') 获取的是一组

是es5出来的，不兼容ie低版本

4.3 获取节点

（1）获取子节点

childNodes 获取出来的是所有类型的节点，平常不用

children 获取所有的元素节点（第一层的所有元素节点）

获取第一个子节点

firstElementChild 不兼容IE低版本

获取最后一个子节点

lastElementChild 不兼容IE低版本

（2）获取父节点

parentNode

（3）获取兄弟节点

上一个兄弟节点

previousElementSibling 不兼容IE低版本

下一个兄弟节点

nextElementSibling 不兼容IE低版本

4.4 增删改查...

<body>
<div>
    <div id="odiv2">
        <p>111</p>
        <p id="op">222</p>
        <p>333</p>
        <p>444</p>
        <p>555</p>
    </div>
</div>
<script>
    // 获取元素
    var oDiv1 = document.querySelector('div');
    var oDiv2 = document.getElementById('odiv2');
    var oP = document.getElementById('op')


    // (1)创造一个节点
    var oP1 = document.createElement('p')

    // (2.1)父节点中加入创造的这个节点
    oDiv2.appendChild(oP1)
    // (2.2)父节点中在某某节点前插入
    // oDiv2.insertBefore(oP1,oP)
    // (2.3)在最后的节点插入
    //oDiv2.lastChild(oP1)

    // (3)创造文本节点
    var text = document.createTextNode('哈哈哈哈')

    // (4)将节点内容加入到节点
    oP1.appendChild(text)

    // (5)移除节点
    // oDiv2.removeChild(oP1)

    // (6)替换一个节点
    // oDiv2.replaceChild(oP1,oP)

    // (7)克隆一个节点
      console.log(oDiv2.cloneNode())
      console.log(oDiv2.cloneNode(true))
    console.log(oDiv2.lastElementChild)
</script>