JS面试—JS-Web_API（一）

最新推荐文章于 2024-05-08 01:32:16 发布

We_jia

最新推荐文章于 2024-05-08 01:32:16 发布

阅读量290

点赞数

分类专栏： JavaScript知识点总结

本文链接：https://blog.csdn.net/We_jia/article/details/90115639

版权

JavaScript知识点总结专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、题目

1、DOM是那种基本的数据结构？

2、DOM操作的常用API有哪些

3、DOM节点的attr和property有何区别

2.5 navigator screen location history

DOM操作

一、题目

1、DOM是那种基本的数据结构？

树结构。

2、DOM操作的常用API有哪些

获取DOM节点，以及节点的property和Attribute
获取父节点，获取子节点
新增节点，删除节点

3、DOM节点的attr和property有何区别

property只是一个JS对象的属性的获取和修改

Attribute是对HTML标签属性的获取和修改

4、如何检测浏览器的类型

    var ua=navigator.userAgent;
    var isChrome=ua.indexof('Chrome')
    console.log(isChrome)

5、拆解url的各部分

    console.log(location.href);  //整个url
    console.log(location.protocol); //协议  'http' 'https'
    console.log(location.pathname); //'路径'
    console.log(location.search);
    console.log(location.hash);

二、知识点

2.1 DOM本质

DOM（document object module）文档对象模型。

浏览器把拿到的HTML代码，结构化一个浏览器能识别并且js可操作性的一个模型而已

2.2 DOM节点操作

详细讲解参考本文章http://blog.sina.com.cn/s/blog_c112a2980102xkry.html

获取DOM节点

1）document.ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ("idname");//输出一个对象[object HTMLInputElement]

2）document.ｇｅｔＥｌｅｍｅｎｔｓＢｙＮａｍｅ("name");//输出一个数组对象[object NodeList]

3）document.ｇｅｔＥｌｅｍｅｎｔｓＢｙＴａｇＮａｍｅ("div");//输出一个数组对象[object HTMLCollection]

4）document.ｇｅｔＥｌｅｍｅｎｔｓＢｙＣｌａｓｓＮａｍｅ("classname");//输出一个数组对象[object HTMLCollection]HTML5 DOM中新增了一个令人期待已久的方法getElementsByClassName，不过由于这个方法还比较新，某些DOM实现里可能还没有，所以使用的时候要当心

5）document.ｆｏｒｍｓ;//forms返回一个数组对象[object HTMLCollection]（一个HTMLCollection对象），包含了当前文档中的所有form元素。如果要获取当前页面的第一个表单，document.ｆｏｒｍｓ［０］。如果要获取当前页面的ｎａｍｅ＝＂ｅｘｐｏｒｔＳｅｒｖｌｅｔ＂的表单document.ｆｏｒｍｓ['exportServlet']，后面输出的结果应该是[object HTMLFormElement]。

6）document.querySelector("selectors");//输出的是一个元素对象[object HTMLInputElement]，HTML5新引入了document.querySelector方法用来更方便的从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生脚本代码时方便了许多。接收的参数是一个字符串，这个字符串需要按照合法的css选择语法。可以包含多个css选择器，用逗号隔开querySelector(".inputclass,#username")。但是这两个方法无法查找带伪类状态的元素。比如querySelector(":hover")不会得到预期结果。按照深度优先和先序遍历的原则使用参数提供的css选择器在dom进行查询，返回第一个满足条件的元素。

7）document.querySelectorAll("selectors")//[object NodeList]返回满足条件的元素集合。参数里如果有特殊符号，可以进行转义

property JS对象的属性
Attribute 自定义属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js.js"></script>
</head>
<body>
<div id="div1" class="class-div1">
    <p id="p1" data-name="p1-data-name">this is p1</p>
    <p id=""p2>this is p2</p>
</div>
<div id="div2">
    <p>this is p3</p>
    <p>this is p4</p>

</div>
<script>
    //property
    var div1=document.getElementById("div1");
    console.log(div1.className);
    div1.className="abc";
    console.log(div1.className);
    //attribute
    var p1=document.getElementById("p1");
    console.log(p1.getAttribute("data-name"))
    p1.setAttribute("data-name","xyz")
</script>
</body>
</html>

2.3DOM结构操作

新增节点

    var div1=document.getElementById('div1')
    //新增节点
    var p1 =document.createElement('p')
    p1.innerHTML='this is p1'
    div1.appendChild(p1)   //添加新创建的新元素
    
    //移动已有节点
    var p2=document.getElementById('p2')
    div1.appendChild(p2)

获取父节点
获取子节点（<div><p></p></div>换行与不换行的div的子节点的数量是不一样的）
删除节点

    var div1=document.getElementById('div1')
    //获取父节点
    var parent=div1.parentNode
    //获取子节点
    var child=div1.childNodes   //所有的子节点  
    console.log(child[0].nodeType)    //3  节点类型
    console.log(child[1].nodeType)    //p  节点名称


    //删除节点
    div1.removeChild(child[0])

2.4 BOM操作

Browser Object Model 浏览器对象模型

2.5 navigator screen location history

 //navigator
    var ua=navigator.userAgent;
    var isChrome=ua.indexof('Chrome')
    console.log(isChrome)

 //screen
    console.log(screen.width)
    console.log(screen.height)

 //location 
    console.log(location.href);  //整个url
    console.log(location.protocol); //协议  'http' 'https'
    console.log(location.host);   //域名
    console.log(location.pathname); //'路径'
    console.log(location.search);
    console.log(location.hash);    // #之后

 //history
    history.back()  //返回
    history.forward()  //前进

We_jia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS面试—JS-Web_API（一）

目录一、题目1、DOM是那种基本的数据结构？2、DOM操作的常用API有哪些3、DOM节点的attr和property有何区别4、如何检测浏览器的类型5、拆解url的各部分二、知识点2.1 DOM本质2.2 DOM节点操作2.3DOM结构操作2.4BOM操作2.5navigator screen location history...
复制链接

扫一扫