jsDom操作

最新推荐文章于 2023-03-31 10:17:26 发布

月神11

最新推荐文章于 2023-03-31 10:17:26 发布

阅读量157

点赞数

分类专栏： javascript 文章标签： java

本文链接：https://blog.csdn.net/zqs520/article/details/84792989

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>

</head>

<body class='aa'>

   <form>
        <input id='i1' type='text'/>
        <p>aaasssssssss</p>

        <ol>
        <li id="li1">Coffee</li>
        <li>Milk</li>
        </ol>

   </form>

<script>

     /**
      alert(document.documentElement.childNodes.length);
      alert(document.documentElement.childNodes[1].attributes.length);
      alert(document.documentElement.childNodes[1].attributes[0].nodeName);
      alert(document.documentElement.childNodes[1].attributes[0].nodeValue);
      alert(document.documentElement.childNodes[1].attributes('class').nodeValue);

      alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].textContent)//可能浏览器不支持
      alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerText)
      alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerHTML)
      alert(document.getElementsByTagName('p')[0].innerText);
      alert(document.getElementsByNodeName('p')[0].innerText);
        alert(document.body.previousSibling.nodeName);
       var my=document.getElementById('i1');
         alert(my.nextSibling.nodeName);
      **/
       var a=document.getElementById('li1');
       alert(a);
       a.innerHTML='aaa';

   a.style.fontWeight='bold';


</script>

</body>
</html>

1：查看属于自己的，nodeType,nodeName,nodeValue

2:documentElement

3:元素的名称

alert(document.documentElement.nodeName);
alert(document.documentElement.tagName);
4：子节点

alert(document.documentElement.hasChildNodes());

alert(document.documentElement.childNodes.length);
alert(document.documentElement.childNodes[0].tagName)；//head

5:属性

alert(document.documentElement.childNodes[1].hasAttributes());

alert(document.documentElement.childNodes[1].attributes.length);
alert(document.documentElement.childNodes[1].attributes[0].nodeName); //属性名称
alert(document.documentElement.childNodes[1].attributes[0].nodeValue);//属性内容
alert(document.documentElement.childNodes[1].attributes('class').nodeValue);//获取指定属性的内容

6：访问标签的内容

alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].nodeName)

alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].textContent)//可能浏览器不支持
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerText)
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerHTML)

nodeName与tagName的区别

nodeName所有节点的名称都可以出来

tagName只有元素的名称可以出来，有些节点的名称可能不出来，还是用nodeName好哦

7：dom访问的快捷方法

通过childNodes,parentNode,nodeName,nodeValue,attributes这些属性，可以在dom树结构上实现自由导航，并出来相关的文档操作

document.getElementsByTagName('p')[0]; //通过TagName寻找

getElementByClassName(); // 通过元素的class属性寻找元素

querySelector();//通过css选择器的方式寻找元素（找第一个）

querySelectorAll();//通过css选择器的方式寻找元素（找全部）

8：兄弟节点，及首尾节点

document.body.nextSibling;--null

document.body.previousSibling;---<head>---</head>

alert(document.body.previousSibling.nodeName);
var my=document.getElementById('i1');
alert(my.nextSibling.nodeName);

9:dom节点修改

var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';

我们还可以通过nodeValue=‘xxx’;来修改文本的值

10：样式修改

var a=document.getElementById('li1');
       alert(a);
       a.innerHTML='aaa';

    a.style.fontWeight='bold';//修改样式

11：新增节点

var a=document.getElementById('li1');
       alert(a);
       a.innerHTML='aaa';

    a.style.fontWeight='bold';

    document.body.appendChild(a);

12：移除节点

var a=document.getElementById('li1');
       alert(a);
       a.innerHTML='aaa';

    a.style.fontWeight='bold';

    document.body.appendChild(a);
    document.body.removeChild(a);

13：事件

内联HTML属性写法

<div οnclick='alert(111)'>click</div>

元素属性法

<div id='div1'>click</div>
</body>
<script>
var mydiv=document.getElementById("div1");
mydiv.οnclick=function(){
alert("div1");
}
</script>
</html>

事件监听（有的浏览器可能不支持）

<div id='div1'>click</div>

</body>

<script>

var mydiv=document.getElementById("div1");
mydiv.addEventListener('click',function(){

alert(111);

});

</script>

js事件捕捉，和事件冒泡

js闭包在网上收索看看

4对象

var dog={

a:a,

b:b,

c:function(){

}

访问对象，dog['a'] 或者dog.a

调用对象中的方法，dog.c();或者dog['c']();

修改属性 dog.a='b';修改方法 dog.c=function(){

xxxxxxxxxx

}

删除一个属性

delete dog.a;

用构造器创建对象用new关键字

function hero(){

this.occupation='nianja';

}

var h=new hero();

h.occupation;

5:原型（待续）

5.1 js都是引用传递，java是值传递

6:继承（待续）

月神11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jsDom操作

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author&quot
复制链接

扫一扫