JavaScript-DOM

DOM

介绍

DOM是JavaScript中操作网页的接口，简称文档对象模型(document Object Model)。它的作用是将网页转为一个JavaScript对象，从而可以使用脚本进行各种操作，如增、删、查、改等。DOM把网页和脚本以及其他的编程语言联系了起来，其结构类似于到树形，组成成分为节点。节点有：元素节点、注释节点(comment)、文本节点(空格、换行)、属性节点和根节点(document)。

DOM的选择器

元素节点选择器

id、class、name、tagname、高级、关系

<div id="box">1</div>
<div id="box">2</div>
<div id="box">3</div>
<div class="msg">
  <div class="sbox">
    <h2>二级标题1</h2>
    <h2>二级标题2</h2>
  </div>
  <h2>二级标题3</h2>
  <h2>二级标题4</h2>
</div>
<div class="cont">4</div>
<div class="cont">5</div>
<div class="cont">6</div>
<span>7</span>
<span><em>hello</em></span>
<span>9</span>
<input type="text" name="user">
<input type="text" name="user">
<input type="text" name="pass">

id : getElementById(id)

返回的是单个对象（获取指定元素的ID元素）

<script>
var box = document.getElementById("box"); 
console.log(box)             //<div id="box">1</div>
</script>

class:getElementByClassName()

返回的是数组对象，如果要使用其中的元素，通过索引解析

<script>
var acont = document.getElementsByClassName("cont")
 console.log(acont)                           //[div.cont,div.cont,div.cont]
 console.log(acont[0])                        //<div class="cont">4</div>
 console.log(acont[0].innerHTML)              //4
 console.log(acont.innerHTML)                 //undefined
</script>

tagname:getElementByTagName()

返回的是数组对象，如果要使用其中的元素，通过索引解析。获得相同元素的节点列表，通过标签名选择元素，返回值是一个数组。

<script>
var aspan = document.getElementsByTagName("span")
 console.log(aspan)      //[span,span,span]
</script>

name:getElementsByName()

返回的是数组对象，如果要使用其中的元素，通过索引解析。通过class名获取元素，返回值是数组，通常用来获取有name

的input的值。

<script>
var auser = document.getElementsByName("user")
    console.log(auser)       //[input,input]
</script>

注：1.不是所有标签都有name值 2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

高级：ES5新增的选择器

querySelector：返回的是单个对象

var ele = document.querySelector("#box")          //<div  class="box">1</div>
var ele = document.querySelector(".cont")          //<div  class="cont">4</div>
var ele = document.querySelector("span")          //<span>7</span>
var ele = document.querySelector(".msg h2")     //<h2>二级标题1</h2>
var ele = document.querySelector(".msg>h2")    //<h2>二级标题3</h2>
    console.log(ele)

querySelectorAll：返回的是数组对象，如果要使用其中的元素，通过索引解析，支持IE8+

var ele = document.querySelectorAll("#box")         //[div#box,div#box,div#box]
var ele = document.querySelectorAll(".cont")         //[div.cont,div.cont,div.cont]
var ele = document.querySelectorAll("span")         //[span,span,span]
var ele = document.querySelectorAll(".msg h2")     //[h2,h2,h2,h2]
var ele = document.querySelectorAll(".msg>h2")     //[h2,h2]
 console.log(ele)

关系

父选子：(选择所有的子元素)

对象.children; 　　//返回一个数组

var omsg = document.querySelector(".msg");
console.log(omsg.children);         //[div.sbox,h2,h2]

子选父：

对象.parentNode; //返回一个元素

var osbox = document.querySelector(".sbox");
 console.log(osbox.parentNode);  

结果：          
<div class="msg">
  <div class="sbox">
     <h2>二级标题1</h2>
     <h2>二级标题2</h2>
  </div>
  <h2>二级标题3</h2>
  <h2>二级标题4</h2>
</div>

第一个子元素：

对象.firstElementChild; //获得第一个非空白的子节点。（IE7/8不支持）

var omsg = document.querySelector(".msg");
  console.log(omsg.firstElementChild)
/*结果：
        <div class="sbox">
            <h2>二级标题1</h2>
            <h2>二级标题2</h2>
        </div>*/

最后一个子元素：

对象.lastElementChild; //获得最后一个非空白的子节点。（IE7/8不支持）

var omsg = document.querySelector(".msg");
 console.log(omsg.lastElementChild)           //<h2>二级标题4</h2>

上一个兄弟：

对象.previousElementSibling //获得上一个兄弟节点。（IE7/8不支持）

var omsg = document.querySelector(".msg");
 console.log(omsg.previousElementSibling)        //<div id="box">3</div>

下一个兄弟：

对象.nextElementSibling　　　　　　 //获得下个兄弟节点。（IE7/8不支持）

var omsg = document.querySelector(".msg");
 console.log(omsg.nextElementSibling)         //<div class="cont">4</div>

其他选择器：

<span>qwe</span>
        <div class="box"><span>1</span>
        <p>2</p>
        hello
        <!-- 这是注释 -->
       <em>3</em></div>
    <span>zxc</span>

父选子节点：选择所有子节点

对象.childNodes 　　　　　　//获取当前元素节点的所有子节点

var obox = document.querySelector(".box")
 console.log(obox.childNodes)            //[span,text,p,text,comment,text,em]

上一个兄弟：

对象.previousString 　　　　　　

//获得上一个兄弟节点。（包含空白节点和注释。IE7/8包括注释节点，不包括空白节点

 var obox = document.querySelector(".box")
 console.log(obox.previousSibling)      //#text

下一个兄弟：

对象.nextString

//获得下一个兄弟节点。（包含空白节点和注释，IE7/8包括注释节点，不包括空白节点

var obox = document.querySelector(".box")
 console.log(obox.nextSibling)            //#text

第一个子：

对象.firstChild //获得第一个子节点。（IE7/8非空白节点，可能是注释节点）

var obox = document.querySelector(".box")
  console.log(obox.firstChild)            //<span>|</span>

最后一个子：

对象.lastChild　　　　

//获得最后一个子节点（IE7最后一个元素节点，IE8最后一个非空白节点，可能是注释节点）

var obox = document.querySelector(".box")
 console.log(obox.lastChild)            //<em>3</em>

过滤空白节点：

通过 对象.childNodes 获得所有子节点的集合

节点属性 nodeType 返回值为数值

节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)

元素节点 1 标签名 null

文本节点 3 #text 文本

注释节点 8 #comment 注释的文字

文档节点 9 #document null

属性节点 2 属性名属性值

通过遍历所有子节点，将空白节点过滤掉，得出所有的元素节点

DOM元素的基本操作（增／删／改／查）

查询：选择器；

创建：createElement() 配合 appendChild() 将创建好的元素，插入到某个标签内的最后

<div  class="box">hello world</div>

var div = document.createElement("div")
console.log(div)
document.body.appendChild(div)

删除：removeChild() 配合 parentNode

元素.remove() 直接删除当前元素

<div  class="box">hello world</div>

var obox = document.querySelector(".box")
obox.remove()
document.body.removeChild(box)

document.body.removeChild(div)；

修改: outerHTML

oh1.outerHTML = "<h2>" + oh1.innerHTML +"</h2>"

补充：创建文本节点createTextNode(“hello”)

使用方式同createElement()

元素的属性操作：

属性节点：attributes(专用方法) 获取所有属性节点，返回一个数组

伪数组：假数组，可以使用索引和长度遍历
但是不能使用数组的方法
所有的DOM选择器，返回的数组，都是伪数组
arguments

真数组：既能通过索引和长度遍历，也可以使用数组的方法

可见：

分为内置与非内置

1).内置

系统提供对象的操作方法：get/set/remove Attribute(）

 <div class="box" a="10" b=20 id="cont" title="这是一个div">
  var obox = document.querySelector(".box");
 console.log(obox.title)                //这是一个div
 obox.title = "1231321";    

console.log(obox.className)          //box
obox.className = "hahah"
console.log(obox.className)          //hahah

console.log(obox.getAttribute("title")) //1231321

console.log(obox.getAttribute("class")) //hahah

2).非内置

get/set/remove Attribute(）

console.log(obox.getAttribute("a"))
                obox.setAttribute("a","hello")       //10
                obox.setAttribute("c","world")
                obox.removeAttribute("a")
                obox.removeAttribute("b")
                obox.removeAttribute("c")

不可见：看不见

1).内置：对象的操作

console.log(obox.innerHTML);    //可以解析标签
console.log(obox.innerText);    //不可以解析标签

2).非内置：对象的操作
元素本身的类型，对象
对象，作为真正的对象操作

obox.abc = "hahahah"
 console.log(obox.abc)         //hahahah

获取非行内样式（兼容问题）

  function getStyle(obj,attr){             //获取非行间样式，obj是对象，attr是值
        if(obj.currentStyle){                //针对ie获取非行间样式
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];   //针对非ie
        };
    };

offsetWidth／offsetHeight／offsetLeft／offsetTop

offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body

offsetLeft：获取元素相对具有定位属性的父级元素的左侧偏移距离

offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离

scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离

clientWidth/clientHeight：元素视窗宽度/高度

offsetWidth/offsetHeight：元素实际宽度/高度

posted @ 2019-08-26 13:47 是壳哥呀~小卡西阅读(149) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

是壳哥呀~小卡西

JavaScript-DOM

公告