目录
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <div id="box">
- <p class="hehe">呵呵</p>
- <input type="text" name="txt">
- <h3>三级标题</h3>
- <input type="text" name="txt">
- <p class="hehe">呵呵</p>
- </div>
- <p class="hehe">呵呵</p>
- <input type="text" name="">
- <p>呵呵</p>
- <script>
- //1. 获取页面中所有的p标题
- var body_p = document.getElementsByTagName('p');
- console.log(body_p);
- //2. 获取所有类名是hehe的标签
- // var p_hehe = document.getElementsByClassName('hehe');
- // console.log(p_hehe);
- //3. 获取所有的name是txt的表单
- var input_name = document.getElementsByName('txt');
- console.log(input_name);
- //4. 获取div#box里面的class=hehe的标签
- // var box_hehe = document.getElementById('box').getElementsByClassName('hehe');
- // console.log(box_hehe);
- //兼容IE9以下的byClassName
- //class是保留字
- function byClassName(obj,className){
- //判断是否兼容
- if(obj.getElementsByClassName){ //支持这个方法,为true
- return obj.getElementsByClassName(className);
- }else{ //不支持这个方法,false
- //声明一个空数组
- var arr = [];
- //获取所有元素
- var eles = obj.getElementsByTagName('*');
- //遍历所有元素
- for(var i = 0,len = eles.length;i < len;i ++){
- //判断每一个元素是否有指定的类名
- if(eles[i].className === className){
- arr.push(eles[i]);
- }
- }
- return arr;
- }
- }
- var box_hehe = byClassName(document.getElementById('box'),'hehe');
- console.log(box_hehe);
-
- let query_hehe = document.querySelectorAll('.hehe');
- </script>
- </body>
- </html>
访问或设置行内样式
- //获取非行内样式
- //标准浏览器
- // alert(getComputedStyle(o_div,1).width);
- //IE浏览器
- // alert(o_div.currentStyle.width);
- //兼容
- function getStyle(obj,attr){
- return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
- // return window.getComputedStyle ? getComputedStyle(obj,1)[attr] : obj.currentStyle[attr];
- }
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <!-- <style>
- #box{
- width:100px;
- height: 100px;
- background: red;
- }
- </style> -->
- </head>
- <body>
- <div id="box"></div>
- <script>
- //1. 获取元素
- var o_box = document.querySelector('#box');
- //2. 添加样式
- o_box.style.width = '100px';
- o_box.style.height = '100px';
- o_box.style.background = 'red';
- // o_box.style.cssText = 'width:100px;height:100px;background:red';
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- #box{
- width: 100px;
- height: 100px;
- background: red;
- }
- </style>
- </head>
- <body>
- <div id="box"></div>
- <script>
- //1. 获取元素
- var o_box = document.querySelector('#box');
- //2. 获取宽度
- // var width = parseInt(o_box.style.width);
- // alert(width);
- //标准浏览器获取非行内样式的方法
- // var width = getComputedStyle(o_box).width;
- //IE浏览器获取非行内样式的方法
- // var width = o_box.currentStyle.width;
- //兼容
- //obj : 指定的标签对象
- //attribute : 属性 attr 样式属性
- function getStyle(obj,attr){
- return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
- }
- // var width = getStyle(o_box,'width');
- // alert(width);
- //3. 逐渐变小
- setInterval(function(){
- o_box.style.height = parseInt(getStyle(o_box,'height')) - 1 + 'px';
- },30)
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- .active{
- width: 100px;
- height: 100px;
- background: red;
- }
- </style>
- </head>
- <body>
- <input type="button" value="on|off">
- <div id="box"></div>
- <script>
- //1. 获取元素
- var div = document.querySelector('#box');
- var onoff = document.querySelector('input');
- //2. 添加类名
- div.className = 'pox';
- // div.className = 'hehe';
- div.classList.add('hehe'); //添加新类名
- div.classList.add('haha');
- div.classList.add('active');
- //获取所有类名
- // console.log(div.classList,div.classList.length);
- //通过下标获取指定的类名
- // console.log(div.classList.item(2));
-
- //3. 添加事件
- onoff.onclick = function(){
- div.classList.toggle('active');
- }
- //4. 删除指定类名
- div.classList.remove('hehe');
- //5. 查看指定的类名是否存在
- console.log(div.classList.contains('hehe'));
- </script>
- </body>
- </html>
元素.属性 元素['属性'] 元素.getAttribute('属性名') 元素.setAttribute('属性名','属性值') 元素.removeAttribute('属性名')
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <div id="box" title="标题" data-id="sp1"></div>
- <script>
- //1. 获取元素
- var div = document.getElementById('box');
- //2. 获取属性
- // console.log(div.id,div['title']);
- // console.log(div.name,div.hehe);
-
- //3. 获取自定义属性
- // console.log(div.getAttribute('name'));
- // //4. 设置自定义属性
- // div.setAttribute('heihei','嘿嘿');
- // //5. 删除自定义属性
- // div.removeAttribute('name');
- div.dataset.cartId = 999;
- console.log(div.dataset.id);
- div.id = '';
- </script>
- </body>
- </html>
元素.getAttribute('属性名') : 获取属性 元素.setAttribute('属性名','属性值') : 设置属性 元素.removeAttribute('属性名') : 删除属性
- <body>
- <div id="box" data-my-id="me"></div>
- <script>
- var o_div = document.getElementById('box');
- console.log(o_div.dataset.myId); //'me'
- </script>
- </body>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <!-- <input type="text" name="" value="请输入姓名:">
- <div id="box">呵呵<strong>哈哈</strong>嘿嘿</div> -->
- <input type="text" name="">
- <div id="box"></div>
- <script>
- //1. 获取元素
- var txt = document.querySelector('input');
- var div = document.querySelector('#box');
- //3. 添加内容
- txt.value = '姓名:';
- // div.innerText = '呵呵<i>嘿嘿</i>嘻嘻';
- div.innerHTML = '呵呵<i>嘿嘿</i>嘻嘻';
- //2. 获取元素中的内容
- console.log(txt.value);
- console.log(div.innerHTML);
- console.log(div.innerText);
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- #box{
- width: 100px;
- height: 100px;
- background: red;
- border: 1px solid black;
- padding: 5px;
- }
- </style>
- </head>
- <body>
- <div id="box"></div>
- <script>
- //1. 获取元素
- var div = document.querySelector('#box');
- //2. 获取div的相对宽高
- //width + padding + border
- //height + padding + border
- console.log(div.offsetWidth,div.offsetHeight); //112 112
- //width/height + padding
- console.log(div.clientWidth,div.clientHeight); //110 110
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- #box{
- width: 300px;
- height: 300px;
- background: red;
-
- }
- .pox{
- width: 100px;
- height: 100px;
- background: green;
- position: absolute;
- left: 100px;
- top: 100px;
- border: 10px solid purple;
- }
- </style>
- </head>
- <body>
- <!-- box的父亲是body -->
- <div id="box">
- <!-- pox的父亲是box -->
- <div class="pox"></div>
- </div>
- <script>
- // 1. 如果没有定位,则相对于页面(body)边的距离
- // 2. 如果有定位,则相对于父元素边距离。
- //1. 获取元素
- var div = document.querySelector('#box');
- var pox = document.querySelector('.pox');
- //2. 添加事件
- // 1. 如果没有定位,则相对于页面(body)边的距离
- console.log(div.offsetLeft,div.offsetTop); // 8 8
- // 2. 如果有定位,则相对于父元素边距离。
- console.log(pox.offsetLeft,pox.offsetTop); //100 100
-
- console.log(pox.clientLeft); //边框的宽度
-
- </script>
- </body>
- </html>
- //删除空白文本子节点
- function noSpaceNode(node) {
- //获取所有子节点
- var childs = node.childNodes;
- //遍历所有的子节点
- for (var i = 0; i < childs.length; i++) {
- //文本 空白
- if (childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)) {
- //删除空白节点
- node.removeChild(childs[i]);
- }
- }
- return node;
- }
- | nodeType | nodeName | nodeValue |
---|---|---|---|
元素节点 | 1 | 大写标签名 | null |
属性节点 | 2 | 属性名 | 属性值 |
文本节点 | 3 | #text | 文本内容 |
- <body>
- <ul></ul>
- <script>
- //1. 获取页面元素
- var ul = document.querySelector('ul');
- //2. 假设我们从后端获取到一组数据
- var arr = ['呵呵','哈哈','嘿嘿','嘻嘻','咕咕','嘎嘎'];
- //链接的数组
- var link = ['http://www.baidu.com','http://www.taobao.com','http://jd.com','http://1000phone.com','http://www.qq.com','http://www.sina.com.cn'];
- //3. 遍历数组
- arr.forEach(function(item,index){
- //1. 创建一个li
- var li = document.createElement('li');
- //2. 创建a
- var a = document.createElement('a');
- //3. 设置元素属性
- a.href = link[index];
- //4. 设置元素内容
- // a.innerText = item;
- // 创建一个文本节点
- var txt = document.createTextNode(item);
- // 文本节点添加到a元素中
- a.appendChild(txt);
- //5. 将a元素添加到li中
- li.appendChild(a);
- //6. 将li添加到ul中
- ul.appendChild(li);
- })
- </script>
- </body>
- <body>
- <ul></ul>
- <script>
- //1. 获取页面元素
- var ul = document.querySelector('ul');
- //创建一个文档碎片
- var fragment = document.createDocumentFragment();
- //2. 添加10个元素
- for(var i = 0;i < 10;i ++){
- //创建li
- var li = document.createElement('li');
- //li中添加内容
- li.innerText = i + 1;
- //li添加到ul中
- // ul.appendChild(li);
- fragment.appendChild(li);
- }
- ul.appendChild(fragment);
-
- //创建一个li
- var li = document.createElement('li');
- //文本节点
- var txt = document.createTextNode('long long a go');
- //txt 添加到li中
- li.appendChild(txt);
- //li 插入第一个子节点的前面
- ul.insertBefore(li,ul.children[0]);
-
- </script>
- </body>
- <body>
- <ul></ul>
- <script>
- //1. 获取页面元素
- var ul = document.querySelector('ul');
- //创建一个文档碎片
- var fragment = document.createDocumentFragment();
- //2. 添加10个元素
- for(var i = 0;i < 10;i ++){
- //创建li
- var li = document.createElement('li');
- //li中添加内容
- li.innerText = i + 1;
- //li添加到ul中
- // ul.appendChild(li);
- fragment.appendChild(li);
- }
- ul.appendChild(fragment);
-
- //创建一个li
- var li = document.createElement('li');
- //文本节点
- var txt = document.createTextNode('long long a go');
- //txt 添加到li中
- li.appendChild(txt);
- //li 插入第一个子节点的前面
- ul.insertBefore(li,ul.children[0]);
-
- //创建一个新的文本节点
- var new_txt = document.createTextNode('good good study,day day up');
- //替换
- li.replaceChild(new_txt,txt);
- </script>
- </body>
- <body>
- <p id="parent">呵呵</p>
- <script>
- //1. 获取页面元素
- var p = document.querySelector('p');
- //2. 删除子节点
- p.removeChild(p.firstChild);
- //3. 删除自己
- p.remove();
- </script>
- </body>
- <body>
- <p id="parent">呵呵</p>
- <script>
- //1. 获取页面元素
- var p = document.querySelector('p');
- // 获取body
- //获取head document.head
- //获取html document.documentElement
- var body = document.body;
- //2. 添加事件
- p.onclick = function(){
- body.appendChild(this.cloneNode(true));
- }
- </script>
- </body>
false(默认) : 只克隆当前节点,不包含内容。 true : 克隆当前节点,包含内容