JS-WEB-API之DOM

DOM可以理解为：浏览器把拿到的html代码，结构化为一个浏览器能够识别并且js可以操作的一个模型而已。

一.DOM节点操作

获取DOM节点

  <script type="text/javascript">
    var one = document.getElementById("app");  //元素
    var two = document.getElementsByTagName("div")  //集合
    var three = document.getElementsByClassName("total")  //集合
    var four = document.querySelectorAll('p')  //集合
  </script>

2.属性property, js对象的标准属性

  <script type="text/javascript">
    var pList = document.querySelectorAll("p");
    var p = pList[0];   //p实际上是一个js对象
    console.log(p.style.width);    //获取样式，p是js对象，那么他就有属性，style就是p的一个属性
    p.style.width = "300px";    //修改样式
    console.log(p.className);    //获取class
    p.className = "p1";    //修改样式

    //获取nodeName 和 nodeType
    console.log(p.nodeName);
    console.log(p.nodeType);
    /*nodeName 属性指定节点的节点名称。
      如果节点是元素节点，则 nodeName 属性返回标签名。
      入股节点是属性节点，则 nodeName 属性返回属性的名称。
      对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。*/
    /*nodeType 属性返回以数字值返回指定节点的节点类型。
      如果节点是元素节点，则 nodeType 属性将返回 1。
      如果节点是属性节点，则 nodeType 属性将返回 2*/
  </script>

3.属性Attribute，指的是标签里面的属性

  <script type="text/javascript">
    var pList = document.querySelectorAll("p");
    var p = pList[0];   
    p.getAttribute("data-name");    //获取p这个对象对应的标签的data-name属性
    p.setAttribute("data-name", "imooc");    //设置p这个对象对应的标签的data-name属性为imooc
    p.getAttribute("style");
    p.setAttribute("style", "color:red;");
  </script>

二.DOM结构操作

新增节点

<body>
  <div id="div1"></div>
  <p id="p2"></p>
  <script type="text/javascript">
    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);
  </script>
</body>

2.获取父元素和子元素以及移除节点

<body>
  <div class="box">
    <div id="div1">
      <p>p1</p>
      <p>p2</p>
      <span>span1</span>
      <span>span2</span>
    </div>
  </div>
  <script type="text/javascript">
    var div1 = document.getElementById("div1");
    //获取父元素
    var parent = div1.parentElement;    //元素,即class="box"的div
    //获取子元素
    var child = div1.childNodes;    //集合，text指的是标签之间含有的空白文本，如果将空隙删除，则没有text，可以用nodeType或者nodeName来进行判断
    //移除节点
    div1.removeChild(child[1]);
  </script>
</body>

问题一：DOM是那种基本的数据结构？

问题二：DOM操作常用API有哪些？

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

问题三：DOM节点的Attribute和property有何区别？

property只是一个js对象属性的获取和修改
Attribute是对html标签属性的获取和修改

三.BOM操作

1.navigator & screen

  <script type="text/javascript">
    //navigator 获取浏览器信息
    var ua = navigator.userAgent;
    var isChrome = ua.indexOf("Chrome");
    console.log(isChrome);

    //screen  浏览器屏幕相关信息
    console.log(screen.width);    //1366
    console.log(screen.height);    //768
  </script>

2.location & history

  <script type="text/javascript">
    //location  获取url相关信息
    console.log(location.href);
    console.log(location.protocol);  //协议,'http:'或'https:'
    console.log(location.host);  //获取域名
    console.log(location.pathname)  //获取域名后面的目录,如'/learn/199'
    console.log(location.search);  //url中？的后面的一些字符串参数
    console.log(location.hash);  //url中#后面的一些信息

    //history 
    history.forward();  //下一步
    history.back();    //返回
  </script>

问题一：如何检测浏览器的类型？

<script>
    var ua = navigator.userAgent;
    var isChrome = ua.indexOf("Chrome");
    console.log(isChrome);
</script>

问题二：拆解url的各部分。

<script>
    console.log(location.href);
    console.log(location.protocol);  //协议,'http:'或'https:'
    console.log(location.host);  //获取域名
    console.log(location.pathname)  //获取域名后面的目录,如'/learn/199'
    console.log(location.search);  //url中？的后面的一些字符串参数,包括问号
    console.log(location.hash);  //url中#后面的一些信息，包括井号
</script>

想要改变页面地址，可以：

location.href = 'https://www.imooc.com';

一.DOM节点操作

二.DOM结构操作

问题一：DOM是那种基本的数据结构？

问题二：DOM操作常用API有哪些？

问题三：DOM节点的Attribute和property有何区别？

三.BOM操作

问题一：如何检测浏览器的类型？

问题二：拆解url的各部分。

猜你喜欢