# DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口，定义了访问和操作 HTML 文档的标准。

事例参考的 HTML 结构

<div class="my-select">
    <button id="selectBtn">选择</button>
    <ul class="select-list">
        <li>
            <input id="countryInput" type="text" name="country" placeholder="请输入">
            <button id="addCountry">确定</button>
        </li>
        <li class="select-item" data-value="中国">中国</li>
        <li class="select-item" data-value="美国">美国</li>
        <li class="select-item" data-value="英国">英国</li>
        <li class="select-item" data-value="德国">德国</li>
    </ul>
</div>

# 获取元素

• document.getElementById [原生]
• document.getElementsByClassName [原生]

var selectBtn   = document.getElementById('selectBtn');
var selectItems = document.getElementsByClassName('select-item');

• querySelector ( 兼容IE8以上浏览器 ) [原生，通过选择器获取]

var selectBtn   =  document.querySelector('#selectBtn');
var selectItems = document.querySelectorAll('.select-item');

注意：querySelector 只返回一个元素，如果参数为class选择器元素，同样返回一个元素。

• $(seletor) （ JQuery2.x 开始兼容IE9 以上浏览器，使用前请先引入 JQuery ） [jQuery]

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

var selectBtn   = $('#selectBtn');
var selectItems = $('.select-item');

获取元素常用的几种方法，获取到元素可以在控制台console打印一下，会发现通过 class 类获取的元素为数组形式。

# 获取元素的父级元素

• parentNode

var selectBtn =  document.querySelector('#selectBtn'); // 获取按钮元素
var mySelect  =  selectBtn.parentNode; // 按钮元素的父级元素，就是 my-select 元素

• jQuery

var selectBtn = $('#selectBtn');
var mySelect  = selectBtn.parent();

# 获取元素中的子元素

• children

var mySelect  = document.getElementsByClassName('my-select')[0]; // 获取my-select 元素
var selectChildren = mySelect.children; // 获取 my-select 下的子元素，包含一个 button 元素 和 ul 元素。

• children()

var selectList  = $('.my-select');
var selectChildren = selectList.children(); // 获取 my-select 下的子元素，包含一个 button 元素 和 ul 元素
var selectList = selectList.children('.select-list'); // 获取 my-select 下，class 为 select-list 的子元素

• find()

var selectList  = $('.my-select');
var selectItems = selectList.find('.select-item'); // 获取my-select 下，class 为 select-item 的元素

jQuery 中 find() 和 children() 的区别在于，children 匹配的是子元素，而 find 匹配的不仅仅是子元素，还包括子元素里面的子孙元素。

# 获取元素的相关元素

原生方法

• childElementCount 返回子元素的个数
• firstElementChild 返回第一个子元素
• lastElementChild 返回最后一个子元素
• previousElementSiblimg 返回前一个同辈元素
• nextElementSiblimg 返回后一个同辈元素

jQuery方法

• first()
• last()
• prev()
• next()

# 获取元素属性

• getAttribute [原生]

var firstItem = document.getElementsByClassName('select-item')[0];
var value = firstItem.getAttribute('data-value');
console.log(value); // 中国

getElementsByClassName 获取的是一个类的元素组合，可以同数组第0项的方式获取组合中第一个元素。然后通过元素的 getAttribute 方法获取其 data-value 和 data-id 属性。

如果该元素为 input 元素，其 value 属性需要过其元素中 value 属性获取。例如：我们在输入框输入"测试",然后通过运行以下代码

var inputElement = document.getElementById('countryInput');
var value  = inputElement.value;
console.log(value);    // 测试 

• attr [jQuery]

var firstItem = $('.select-item').eq(0);
var value = firstItem.attr('data-value');
console.log(value); // 中国

在 jQuery 同样 $('.select-item') 获取到的也是一个类元素组合，如果通过第 0 项的方式获取，则我们会获取到一个原生的对象。如果想继续使用 jQuery 方法，可以通过其 eq(n) 方法来获取第 n 项，返回 n 项的 jQuery 元素对象，继续使用其 attr() 方法来获取属性值。

如果获取的属性值以 data- 前缀开头，例如事例中的 data-value ，可以使用 data() 方法来获取其里面的属性值。例如：

var firstItem = $('.select-item').eq(0);
var value = firstItem.data('value');
console.log(value); // 中国

在表单元素中，jQuery 可以通过 val() 方法获取其 value 值。同理在输入框输入"测试",然后通过运行以下代码：

var inputElement = $('#countryInput');
var value  = inputElement.val();
console.log(value);    // 测试

# 获取元素位置及大小

• 原生

let elem = document.getElementById('elem');
let offsetTop     = elem.offsetTop;
let offsetLeft    = elem.offsetLeft;
let offsetHeight  = elem.offsetHeight;
let offsetWidth   = elem.offsetWidth;
// offsetWidth  为元素的宽度，包含 border + padding + content;
// offsetHeight 为元素的高度，包含 border + padding + content;
// offsetTop    为元素相对于有定位的父元素的上偏移量，会一直找到根节点;
// offsetLeft   为元素相对于有定位的父元素的左偏移量，会一直找到根节点;

let clientHeight  = elem.clientHeight;
let clientWidth   = elem.clientWidth;
// clientHeight 为元素内容的高度，包含 padding + content;
// clientWidth  为元素内容的宽度，包含 padding + content;

let scrollWidth   = elem.scrollWidth;
let scrollHeight  = elem.scrollHeight;
let scrollLeft    = elem.scrollLeft;
let scrollTop     = elem.scrollTop;
// scrollWidth  为元素的视口宽度;
// scrollHeight 为元素的视口高度;
// scrollLeft   为元素的元素视图横向滚动的距离;
// scrollTop    为元素的元素视图纵向滚动的距离;

let rect       = elem.getBoundingClientRect();
let rectTop    = rect.top;
let rectBottom = rect.bottom;
let rectLeft   = rect.left;
let rectRight  = rect.right;
let rectWidth  = rect.width;
let rectHeight = rect.height;
// rectTop    为元素上边距离浏览器顶部的距离
// rectBottom 为元素下边距离浏览器顶部的距离
// rectLeft   为元素左边距离浏览器左侧的位置
// rectRight  为元素右边距离浏览器左侧的位置
// rectWidth  为元素的宽度，包含 border + padding + content;
// rectHeight 为元素的高度，包含 border + padding + content;

• jQuery

$('#elem').height();        // 元素内容的高度，仅包含 content
$('#elem').width();         // 元素内容的宽度，仅包含 content

$('#elem').offset().top;    // 元素距离浏览器视图顶部的距离
$('#elem').offset().left;   // 元素距离浏览器视图左部的距离

$('#elem').position().top;  // 元素相对于有定位的父元素的上偏移量，会一直找到根节点;
$('#elem').position().left; // 为元素相对于有定位的父元素的左偏移量，会一直找到根节点;

$('#elem').scrollLeft();    // 为元素的元素视图横向滚动的距离;
$('#elem').scrollTop();     // 为元素的元素视图纵向滚动的距离;

# 设置元素属性

• setAttribute [原生]

var firstItem = document.getElementsByClassName('select-item')[0];
var value = firstItem.setAttribute('data-test','test');

给第一个item 元素，设置一个名为 data-test 的属性，其值为 test。

var inputElement = document.getElementById('countryInput');
inputElement.value = "通过登录号直接赋值"; 

通过等于号可以直接给表单元素的value赋值

• attr [jQuery]

var firstItem = $('.select-item').eq(0);
firstItem.attr('data-test','test2');

同样通过 attr 方法，如果含有第二个参数时候，代表赋值行为。

var inputElement = $('#countryInput');
inputElement.val("jQuery 表单赋值");

在 val 方法中，如果 val() 里面没有传参数代表获取，如果传参数 val('something') 代表赋值。

# 获取元素文本

• innerHTML [原生]

var text = document.querySelector('#selectBtn').innerHTML;
console.log(text) // 选择

• text [jQuery]

var text = $('#selectBtn').text();
console.log(text) // 选择

# 设置元素文本

• innerHTML [原生]

document.querySelector('#selectBtn').innerHTML = "选择HTML";

• text [jQuery]

$('#selectBtn').text("选择JQuery");

# 创建元素

• createElement [原生]

var newItem = document.createElement('li');  // 创建一个li标签的元素
newItem.setAttribute('class','select-item'); // 为元素设置class属性
newItem.setAttribute('data-value','韩国');    // 为元素设置data-value属性
newItem.innerText = '韩国';                   // 为元素设置文字
console.log(newItem);

• $(element) [jQuery]

var eleStr = '<li class="select-item" data-value="韩国">韩国</li>';
var newItem = $(eleStr);
console.log(newItem)

# 拷贝元素

• cloneNode [原生]

var firstItem = document.getElementsByClassName('select-item')[0];
var cloneItem = firstItem.cloneNode();
console.log(cloneItem)

• clone [jQuery]

var firstItem = $('.select-item').eq(0);
var cloneItem = firstItem.clone();
console.log(cloneItem)

# 插入元素

• appendChild [原生]
• prepend [原生]

// 创建一个元素
var newItem = document.createElement('li'); 
newItem.setAttribute('class','select-item'); 
newItem.setAttribute('data-value','韩国');    
newItem.innerText = '韩国';                   

// 获取插入元素的父元素
var selectList = document.getElementsByClassName('select-list')[0];

// 把创建元素在某元素内底部插入
selectList.appendChild(newItem);

// 把克隆元素在某元素内前部插入
var cloneItem = newItem.cloneNode();
cloneItem.setAttribute('data-value','日本');
cloneItem.innerText = '日本';                   
selectList.prepend(cloneItem);

• append [jQuery]
• prepend [jQuery]

// 创建一个元素
var eleStr = '<li class="select-item" data-value="韩国">韩国</li>';
var newItem = $(eleStr);

var selectList = $('.select-list');

// 把创建元素在某元素内底部插入
selectList.append(newItem);

// 把克隆元素在某元素内前部插入
var cloneItem = newItem.clone();
cloneItem.data('value','日本');
cloneItem.text('日本');
selectList.prepend(cloneItem);

# 删除元素

• removeChild [原生]

var firstItem = document.getElementsByClassName('select-item')[0];
firstItem.parentNode.removeChild(firstItem)

removeChild 是父元素移除子元素的方法，我们获取到子元素的时候，通过其 parentNode 获取到他的父元素，再调用方法把自身移除。

• remove [jQuery]

var firstItem = $('.select-item').eq(0);
firstItem.remove();

JQuery 对象中通过 remove 方法直接移除。