JS——BOM&事件

标签：jli1 JS getElementById 事件 lis var li document BOM

即做特定动作时，更改其原有的属性和方法。

特点：

在事件定义的function的this是指的绑定事件的对象。
全部行为内添加，优先级最高
事件相同时，后面会覆盖前面的事件。

onclick（点击事件）

在鼠标点击时，产生的事件

<body>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<script>
			var lis = document.getElementsByTagName('li');
			for(var i=0; i < lis.length;i++){
				lis[i].onclick = function() {
					console.log(this)
				};
			};
	</script>
</body>

onmouseover（鼠标悬浮事件）

当鼠标悬浮时，所产生的事件

onmouseout（鼠标离开事件）

当鼠标离开时，产生的事件。

className（增加class属性）

可以为其进行属性的增加
可以为其进行当前class名字的获取
如果要在原有基础上增加则使用+=，需要注意中间要加空格分开。并加判断结束不间断的添加。

为匹配到的标签进行class属性的增加

<body>
    <li>1</li>
<script>
    var lis = document.getElementsByTagName('li');
    lis[0].className = 'active'
</script>
</body>

获取class名字

<body>
    <div id="box" class="hh"></div>
<script>
        // 1. 获取事件源对象
        var lis = document.getElementById('box');
console.log(lis.className);
</script>
</body>

children（获取子元素，包括子元素属性）

<body>
    <ul id = 'box'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

<script>
        var lis = document.getElementById('box');
console.log(lis.children
           ); 
</script>
</body>

getAttribute（获取标签上属性名称）

<body>
    <div id="box"></div>
    <script>
            var lis = document.getElementById('box');
    console.log(lis.getAttribute('id'));
    </script>
</body>

setAttribute（更改标签上属性名称）

自定义的属性，使用setAttribute是在网页中可以看到的。而如果使用lis.abc=123这种方式来进行添加，那么就无法看到，需要使用dir来查看。

<body>
    <div id="box"></div>
    <script>
            // 将id更改为hh
            var lis = document.getElementById('box');
    console.log(lis.setAttribute('id','hh'));
    </script>
</body>

appendChild（添加标签）

搭配createElement使用。

<body>
    <ul id='uul'></ul>
    <script>
        var lis = document.getElementById('uul');
        var jli = document.createElement('li')
        lis.appendChild(jli)
    </script>
</body>

insetBefore（插入新标签）

<body>
    <ul id='uul'></ul>
    <script>
        var lis = document.getElementById('uul');
        var jli1 = document.createElement('li')
        var jli2 = document.createElement('li')
        lis.appendChild(jli1)
        jli1.innerText='111';
        lis.insertBefore(jli2,jli1)
        jli2.innerHTML='222'
    </script>
</body>

innerHTML（添加内容，可以以标签形式添加）

innertext（添加内容，只能以文本形式添加）
这俩属于同一个项，会进行覆盖。

<body>
    <ul id='uul'></ul>
    <script>
        var lis = document.getElementById('uul');
        var jli = document.createElement('li')
        lis.appendChild(jli)
        jli.innerText='bbb';
        jli.innerHTML='aaa';
    </script>
</body>

removerChild（删除标签）

<body>
    <ul id='uul'></ul>
    <script>
        var lis = document.getElementById('uul');
        var jli1 = document.createElement('li')
        var jli2 = document.createElement('li')
        lis.appendChild(jli1)
        jli1.innerText='111';
        lis.insertBefore(jli2,jli1)
        jli2.innerHTML='222'
        lis.removeChild(jli1)
    </script>
</body>

标签：jli1,JS,getElementById,事件,lis,var,li,document,BOM
From： https://www.cnblogs.com/xinbing/p/17003743.html